Вертикально Выравнивание текста с помощью CSS

В следующем HTML, почему все содержание появляется вне <footer> и почему текст не вертикально среднего выровнены?Вертикально Выравнивание текста с помощью CSS

<html> 

    <head> 
     <style> 
      body { 
       margin-left: 20%; 
       margin-right: 20%; 
      } 
      footer { 
       text-align: center; 
       border: 1px dotted black; 
      } 
      #foo { 
       float: left; 
       vertical-align: middle; 
      } 
      #bar { 
       float: right; 
      } 
     </style> 
    </head> 

    <body> 
     <footer> <span id="foo">this is some text</span> 
<span id="bar"><img src="http://i.imgur.com/wgFpmlN.png"></span> 

     </footer> 
    </body> 

</html>

источник

2013-09-01 Simon Morgan

Используйте 'линии height' свойство. Попробуйте установить его значение, равное высоте нижнего колонтитула. Он будет работать только для встроенных элементов, для элементов блоков, которые вам нужно играть с полями. –

Это может быть полезно http://deeson-online.co.uk/labs/how-centre-align-text-or-content-vertically-css – zdesam

Если по какой-то причине 'line-height' не является опцией (по вертикали пространство, созданное этой высотой, не является кликабельным), используйте 'padding' для элемента. Альтернативно определите «высоту» элемента. Просто не забудьте сделать это «display: block» или «display: inline-block» –

Это потому, что у вас есть поплавки и ни одного блока или встроенные элементы, взгляните на clearfix хака. Или я не знаю, действительно ли это считается взломом.

Если вы не чувствуете, как чтение только добавить к вашей CSS

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
}

Amd добавить clearfix класс в сноске

источник

2013-09-01 11:13:58

<body> 
<footer> 
    <span id="foo">this is some text</span> 
    <span id="bar"><img src="http://i.imgur.com/wgFpmlN.png"></span> 
    <br clear /> <!-- you need to put clear here or do that with css--> 
</footer> 
</body>

Вы можете проверить на http://jsfiddle.net/yGPKF/1/

источник

2013-09-01 11:20:11 zdesam

попробуйте это

в этом примере footer имеет height и #foo имеет line-height оба одинаковые.

body { 
 
    margin-left: 20%; 
 
    margin-right: 20%; 
 
} 
 
footer { 
 
    text-align: center; 
 
    border: 1px dotted black; 
 
    height: 100px; 
 
} 
 
#foo { 
 
    vertical-align: middle; 
 
    line-height: 100px; 
 
} 
 
#bar { 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
}

<footer> <span id="foo">this is some text</span> 
 
    <span id="bar"><img src="http://i.imgur.com/wgFpmlN.png"></span> 
 

 
</footer>

источник

2014-09-25 10:55:56

Вертикально Выравнивание текста с помощью CSS

ответ

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