CSS - Вертикальное выравнивание без высоты

Я пытаюсь вертикально выровнять текст в поле, которое имеет высоту, которая изменяется в соответствии с шириной (так что это идеальный квадрат). Я просто не могу заставить его работать. У меня есть 2 вопросы:CSS - Вертикальное выравнивание без высоты

Я пытаюсь вертикально выровнять текст в классе «smallbox».
Кроме этого, я также не могу получить класс «text» для вертикального выравнивания.

Вот мой fiddle

Вот мой CSS:

* { 
    margin: 0; 
    padding: 0; 
} 

html, body { 
    background: yellow; 
    font-size: 2.5vmin; 
} 

body { 
    text-align: center; 
} 

#container { 
    margin: 0 auto; 
    width: 100%; 
} 

.box { 
    /*width: 200vmin;*/ 
    width: 90%; 
    margin: 0 auto; 
    display: inline-block; 
    /*padding-bottom: 5vmin;*/ 
    padding-bottom: 2.5%; 
} 
.smallbox { 
    position: relative; 
    float: left; 
    vertical-align: middle; 
    width: 16.8%; 
    border-radius: 2vmin; 
    font-size: 6vmin; 
    text-align: center; 
    word-wrap: break-word; 
    display: table; 
    table-layout: fixed; 
    color: red; 
    background-color: blue; 
} 
.smallbox b { 
    margin-top: 100%; 
    display: block; 
    zoom: 1.0; 
} 

.smallbox p { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    text-decoration: none; 
    display: table-cell; 
    vertical-align: middle; 
} 
.content { 
    width: 80%; 
    min-height: 28vmin; 
    background-color: white; 
    float: right; 
    border-radius: 2vmin; 
    font-size: 3.5vmin; 
    position: relative; 
    padding-bottom: 5vmin; 
} 
.content:before { 
    content: ' '; 
    position: absolute; 
    width: 0; 
    height: 0; 
    left: -4.75vmin; 
    top: 13.5vmin; 
    border-top: 3vmin solid transparent; 
    border-bottom: 3vmin solid transparent; 
    border-right: 5vmin solid white; 
} 
.title { 
    height: 5vmin; 
    padding: .75vmin 1.5vmin; 
    border-radius: 2vmin 2vmin 1vmin 1vmin; 
    margin: .5vmin; 
    font-weight: bold; 
    text-align: left; 
    color: red; 
    background-color: blue; 
} 
.text { 
    padding: .5vmin 2vmin; 
    text-align: center; 
} 
.left { 
    padding: .5vmin 2vmin; 
    position: absolute; 
    bottom: 0; 
    font-weight: bold; 
} 
.right { 
    padding: .5vmin 2vmin; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    font-weight: bold; 
    border-radius: 2vmin 2vmin 2vmin 2vmin; 
    margin: .5vmin; 
    color: red; 
    background-color: blue; 
} 
.right a { 
    text-decoration: none; 
} 
.arrowleft { 
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-right:10px solid blue; 
}

Вот мой HTML:

<!DOCTYPE html> 
<html><head> 
     <link rel="stylesheet" href="box.css"> 
    </head> 
<body> 
<div id="container"> 
     <div class="box"> 
       <div class="smallbox"><b></b><p>Onceuponatimeinafarawayland</p></div> 
       <div class="content"> 
        <div class="title">Some Title</div> 
        <div class="text"><p>This is just some example text here</p> 
</div> 
        <div class="left">Left</div> 
        <a href=""><div class="right">Right</div></a> 
       </div> 
      </div> 





</div> 

</body></html>

источник

2013-03-09 Pamela

Добавить CSS:

.smallbox p:before{ 
content:" "; 
display:inline-block; 
vertical-align:middle; 
height:100%; 
width:1px; 
} 
.smallbox p span{ 
display:inline-block; 
vertical-align:middle; 
width:99%; 
}

Заслуга Paul.

источник

2013-03-09 18:47:49 Pamela

Не похоже, что это работает правильно с более чем одной строкой, хотя? – cirrus

На самом деле, это один из немногих методов, которые будут работать правильно с более чем одной строкой. [Jsfiddle] (http://jsfiddle.net/GQAU4/) –

Вы используете position: absolute; на пункте в пределах .smallbox класса, который навязывает он отображает блок, поэтому вертикальное выравнивание не будет иметь эффекта. В приведенной ниже скрипте я использовал свойство line-height, чтобы выровнять текст .smallbox, хотя я не думаю, что это будет работать с динамической высотой.

I also centered параграф класса .text, добавив display: inline-block; и используя значение px для вертикального выравнивания. Просто подстройте его под свои нужды.

источник

2013-03-09 13:20:54 Adrift

спасибо, что исправил абзац класса .text, но я все еще борется с .smallbox. Есть ли другой способ сделать квадрат помимо того, как я использовал, но с его содержащимся текстом, выровненным по вертикали? – Pamela

CSS - Вертикальное выравнивание без высоты

ответ

Смежные вопросы