Как мне сделать мою фотографию и абзац в середине экрана моей страницы

0

Моя проблема заключается в изображении, и абзац не находится в центре экрана страницы, а внизу. Кто-нибудь может мне с этим помочь?

текущий выход: http://jsfiddle.net/YMCLJ/1/

<p class="center">Must be center in the screen</p>
<img class="center" src="http://i38.photobucket.com/albums/e149/eloginko/hello_zpsc60ffbf3.gif"/>

CSS

.center {
    position: absolute;
    left:50%;
    top:50%;
}
  • 0
    Таким образом, текст и изображение должны быть центрированы по горизонтали и вертикали, а изображение поверх текста?
Теги:

5 ответов

-1
Лучший ответ

Если вы хотите иметь элементы в абсолютной середине, попробуйте этот более простой метод:

HTML:

<div class="centered-container">
    <div class="centered-elements">
        <p>Must be center in the screen</p>
        <img src="http://i38.photobucket.com/albums/e149/eloginko/hello_zpsc60ffbf3.gif"/>
    </div>
</div>

CSS:

centered-container {
    display: table;
    position: absolute;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

.centered-elements{
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

http://jsfiddle.net/YMCLJ/13/

Поделиться
  • 0
    Абзац не находится в центре экрана, как того требует OP.
  • 0
    Я не думаю, что он хотел, чтобы текст перекрывал изображение, или изображение перекрывало текст. Это не имеет никакого смысла, так как он мог просто использовать изображение в качестве фона и центрировать текст ... -_-
0

Попробуйте этот код:

img.center {
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
p.center{
text-align:center;
margin-top:50px; // change it according to your need
}

Демо- версия: http://jsfiddle.net/UTn2N/

Если вы поместите оба изображения и абзаца внутри div, их будет легко разместить в центре.

Поделиться
0

Это должно центрировать элемент для вас независимо от его размера:

.center {
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

http://jsfiddle.net/XGq5V/

ОБНОВИТЬ:

Это становится более сложным, чтобы центрировать элемент, который не имеет явных измерений. В вашем случае вы должны обернуть элементы, которые хотите центрировать, в родительском <div>:

<div class="center">
    <img src="http://i38.photobucket.com/albums/e149/eloginko/hello_zpsc60ffbf3.gif" />
</div>
<div class="center">
    <p>Must be center in the screen</p>
</div>

... поэтому мы можем сосредоточить детей на использовании элемента "призрак", чтобы держать его открытым:

.center {
    text-align: center;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}
 .center:before {
    content:'oooh, a ghost';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width:1px; overflow:hidden;
    text-indent:-1000px;
    margin-right: -1px;
}
/* center the child */
 .center > * {
    display: inline-block;
    vertical-align: middle;
}

http://jsfiddle.net/XGq5V/1/

Более подробное обсуждение различных методов можно прочитать на http://css-tricks.com/centering-in-the-unknown/

Поделиться
  • 1
    Абзац не по центру.
  • 0
    Doh! Вот бросил гаечный ключ в работах;) Смотрите мой обновленный ответ.
0

Вы ищете абсолютную методику центрирования.

Есть много способов сделать это, и все они имеют свои преимущества и недостатки, но это проще всего:

.center{
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    text-align: center;
}

демонстрация

Поделиться
0

Вы должны установить отрицательное верхнее и левое поле на 1/2 высоты/ширины изображения.

.center {
    position: absolute;
    left:50%;
    top:50%;
    margin-top:-150px;
    margin-left:-150px;
}

Обновлен JSFiddle

Поделиться
  • 0
    Не помогает центрирование </p>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню