Центр DIV содержания жидкости вертикальной и горизонтальной - PullRequest
Новая
       26

Центр DIV содержания жидкости вертикальной и горизонтальной

3 голосов
/ 08 января 2012

Вот пример, который у меня есть:

enter image description here

Высота строки не относится к элементам div жидкости. Код, который у меня есть, в настоящее время основан на высоте строки, но размеры блоков меняются. Так как же я могу иметь ссылку (контент) всегда точно в середине?

Я хочу убедиться, что содержимое внутри этого DIV всегда будет одинаково центрировано сверху и сбоку. Вертикально и горизонтально по центру.

Текущий код: (тег стиля заметки пуст, поскольку он динамически заполнен) 

    <style type="text/css">
    .box{
    width:468px; /* php changes this sometimes */
    height:60px; /* php changes this sometimes */
    background:#eee;
    text-align:
    center;
    border:
    1px solid rgb(177, 172, 171);
    line-height: 61px;
    }
    </style>

    <div style="" class="box" id="">
<a style="color:#333;font-weight:bold" href="claimPrize();">Winner!</a>
</div>

1 Ответ

10 голосов
/ 08 января 2012

Не так давно столкнулся с подобной ситуацией, выполнил поиск и нашел статью об абсолютном центрировании с помощью css-tricks, здесь - статья и сопроводительная скрипка, чтобы проверить ее.

CSS 

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

HTML 

<div class="block" style="height: 300px;">

    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>

</div>

<div class="block" style="height: 200px;">

    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>

</div>

<div class="block" style="height: 600px;">

    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>

</div>

Демо

http://jsfiddle.net/andresilich/YqKMH/

...