CSS - vertical-align nie działa

Mam kilka naprawdę podstawowy HTML & CSS:CSS - vertical-align nie działa

Oto HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <link rel="stylesheet" media="all" href="stylesheet.css"> 
     <title>Hello, World!</title> 
    </head> 
    <body> 
     <header> 
      Hello<sup>World</sup> 
     </header> 
    </body> 
</html>

Oto CSS:

header { 
    vertical-align: middle; 
    height: 60px; 
    background-color: #00F; 
}

Ale tekst nie wyrównuje się w środku. Dlaczego nie?

Źródło

2011-03-26 ryyst

Obiekt vertical-align dotyczy jedynie:

inline-poziomu i elementów 'table-cell'

Zobacz this link.

Możesz użyć pozycji line-height, aby wyśrodkować tekst w pionie, tylko zwiększyć go do rzeczywistego rozmiaru font-size, jednak działa on tylko wtedy, gdy tekst obejmuje pojedynczą linię.

Alternatywnie można dodać padding do góry i do dołu elementu header według jednakowych wartości.

Edytowany według komentarza: oczywistym rozwiązaniem, jeśli użyjemy elementu HTML5 header, byłoby uczynienie go display: table-cell; zamiast domyślnego bloku, który, jak sądzę, dotyczy resetowania CSS.

Źródło

2011-03-26 12:18:02 clairesuzy

Zamierzam jednak dodać dużo więcej do nagłówka (pomyśl o nawigacji, wyszukiwaniu itp.). Czy muszę umieścić tekst w oddzielnym pojemniku? – ryyst

nie powinieneś potrzebować oddzielnego elementu div/pojemnika, wystarczy umieścić nagłówek równomiernie na górze i dole – clairesuzy

@clairesuzy: To nie ma sensu. Wyobraź sobie, że musiałem w rozmiarze tekstów o różnych rozmiarach i chciałam je wyrównać w środku. Nigdy nie mogłem tego osiągnąć z wyściółką, prawda? – ryyst

Atrybut vertical-align dotyczy tylko elementów śródliniowych. Nie będzie to miało wpływu na elementy na poziomie bloku, takie jak div lub paragraph.Jeśli chcesz wyrównać pionowy element śródliniowy do środka, po prostu użyj tego.

vertical-align: middle;

Sprawdź więcej tutaj: Understanding vertical-align, or "How (Not) To Vertically Center Content"

Źródło

2011-03-26 12:13:53

vertical-align nie działa sposób myślenia to robi w elementach z display:block. Ludzie zwykle używają na przykład line-height:60px, jeśli tekst jest jedyną rzeczą w elemencie i wszystko pozostaje w tej samej linii.

Jeśli jest tam więcej rzeczy, prawdopodobnie lepiej jest podać wysokość kontenera, jeśli koniecznie trzeba i poprawić margines/dopełnienie/etc. elementów wewnątrz elementu zawierającego, aż będzie wyglądać prawidłowo.

Źródło

2011-03-26 12:15:18 Marcel

Cóż, nie będzie dużo więcej w nagłówku w końcu (nawigacyjnym i rzeczy). Zatem użycie 'line-height' nie jest możliwe. – ryyst

@ryyst: Zobacz zaktualizowaną odpowiedź. – Marcel

Nie mogę umieścić tekst wewnątrz 'div' i' vertical-align: middle', że 'div' chociaż ponieważ' div's nie są inline, prawda? Co to jest dobre rozwiązanie (przepraszam za głupie pytania, jestem nowy w HTML/CSS). – ryyst

Jeśli nie chcesz korzystać z tabeli można użyć vertical-align: middle i display: inline-block podczas korzystania z pustego elementu inline ze 100% wysokości:

http://jsfiddle.net/ycugZ/

<!DOCTYPE><html><body> <!-- Author: brillout.com --> 

<div style='height: 300px;border: 1px solid black;text-align:center'> 
    <div class='i'>vertical-align + inline-block<br>trick<br>in action</div> 
    <div class='i' style='height:100%;width:0px'></div> 
</div> 
<style> div.i{ display: inline-block; vertical-align: middle } </style> 

</body></html>

Źródło

2012-05-05 18:45:07 brillout

Spróbuj tego, działa bardzo dobrze dla mnie:

/* Internet Explorer 10 */ 
display:-ms-flexbox; 
-ms-flex-pack:center; 
-ms-flex-align:center; 

/* Firefox */ 
display:-moz-box; 
-moz-box-pack:center; 
-moz-box-align:center; 

/* Safari, Opera, and Chrome */ 
display:-webkit-box; 
-webkit-box-pack:center; 
-webkit-box-align:center; 

/* W3C */ 
display:box; 
box-pack:center; 
box-align:center;

Źródło

2013-09-23 18:06:56

<div style="border:1px solid #000;height:200px;position: relative;"> 
    <div style="position: absolute;top: 50%;left:50%;"> 
    hello mahesh 
    </div> 
</div>

Fiddle demo

Spróbuj tego.

Źródło

2014-08-15 14:09:28

Niestety, tekst nie znajduje się w prawdziwym centrum. Lewy górny róg "pola" tekstowego znajduje się teraz pośrodku. – Christoph

schematu flexbox można to zrobić dość łatwo teraz:

header { 
    display: flex; 
    align-items: center; 
    justify-content: center;; 
}

http://codepen.io/anon/pen/waYBjv

Źródło

2015-07-23 18:47:45

Oto mój ulubiony trik dla pionowych rzeczy uzgadnianiu używa Flex pole, wszystko powinno użyć elastycznego pole!

header { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    border: black solid 0.1rem; 
 
    height: 200px; <!--Insert any height --> 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <link rel="stylesheet" media="all" href="stylesheet.css"> 
 
     <title>Hello, World!</title> 
 
    </head> 
 
    <body> 
 
     <header> 
 
      Hello<sup>World</sup> 
 
     </header> 
 
    </body> 
 
</html>

Źródło

2015-07-23 18:50:21 Zargold

CSS - vertical-align nie działa

Odpowiedz

Powiązane problemy