CSS: Wyśrodkuj tekst zarówno w poziomie, jak iw pionie?

Tworzę nową witrynę i muszę coś wiedzieć (pokaże się z przykładem).CSS: Wyśrodkuj tekst zarówno w poziomie, jak iw pionie?

Powiedzmy, że zrobiłem to:

html;

<div id="center-in-bar"> 
    <ul> 
     <li>content..</li> 
     <li>content..</li> 
     <li>content..</li> 
     <li>content..</li> 
</div>

i css:

#center-in-bar { 
    list-style:none; 
    display:inline-block; 
    /*what to do to make all the li elements centered both horizontal and vertical? in the center-in-bar element*/ 
}

Co mogę zrobić, aby wszystkie elementy li skupionych zarówno poziome i pionowe? W środkowym elemencie?

Każda pomoc będzie appriciated :))

Źródło

2011-11-18 Stian Olsen

pionowe centrowanie nie jest bardzo łatwe i podejście do acheiving zależy to od pewnego kryterium (istnieje kilka różnych sposobów, ale każdy ma warunki). –

Spróbuj CSS fragment:

#center-in-bar ul { 
    ... 
    text-align:center; /* center horizontally */ 
    vertical-align:middle; /* center vertically */ 
    ... 
} 
#center-in-bar li { 
    ... 
    display:inline; /* you might want to use this instead of "inline-block" */ 
    ... 
    text-align:center; /* center horizontally */ 
    vertical-align:middle; /* center vertically */ 
    ... 
}

Źródło

2011-12-12 15:55:56

Jakoś nadal nie ma standardowe dla tej operacji, ale z mojego doświadczenia po to prawdopodobnie najbardziej niezawodnym rozwiązaniem całkowita:

<style type="text/css"> 
    #container {  
     display:table;  
     border-collapse:collapse; 
     height:200px; 
     width:100%; 
     border:1px solid #000; 
    }   
    #layout {  
     display:table-row;  
    }    
    #content {  
     display:table-cell; 
     text-align:center; 
     vertical-align:middle;  
    }    
</style>  
<div id="container">  
    <div id="layout">  
     <div id="content"> 
      Hello world! 
     </div>  
    </div>  
</div>

Oto kolejna technika który wykorzystuje pozycjonowanie względne i bezwzględne do symulacji środkowej pozycji środkowej. Technika ta nie jest dokładna, ale powinno być zgodne z dowolnej przeglądarki (nawet te wczesne):

<style type="text/css"> 
    #vertical{ 
     position:absolute; 
     top:50%; /* adjust this as needed */  
     left:0; 
     width:100%; 
     text-align:center; 
    } 
    #container { 
     position:relative; 
     height:200px; 
     border:1px solid #000; 
    } 
</style>   
<div id="container"> 
    <div id="vertical"> 
     Hello world! 
    </div>    
</div>

Ważna uwaga:

Kiedy to pytanie było zadawane ktoś zawsze wydaje się sugerować line-height postaci rozwiązanie, ale błagam cię, abyś ominął tę sugestię. Wygląda dobrze, gdy demonstrujesz coś prostego, jak "Hello World", ale line-height łamie się okropnie, gdy tekst się zawija.

Źródło

2011-11-18 18:32:36

Należy zauważyć, że metoda 'table-cell' nie działa w niektórych wersjach IE. – Sparky

dzięki, pomógł dużo :) –

Nie ma problemu. Nie zapomnij zaznaczyć odpowiedzi, jeśli jesteś zadowolony. –

JAK poziomo CENTER BLOCK POZYCJA (jak div) LUB ELEMENT inline (jak tekst)

Powiedzmy, że chciał, aby wyśrodkować dokument na stronie przeglądarki tak, że bez względu na to, jak duże zmiany rozmiaru Twoja przeglądarka element jest zawsze skoncentrowane:

body { 
    margin:50px 0px; padding:0px; 
    text-align:center; 
    } 

    #Content { 
    width:500px; 
    margin:0px auto; 
    text-align:left; 
    padding:15px; 
    border:1px dashed #333; 
    background-color:#eee; 
    }

napisać ten HTML do centrowania coś poziomo między tagami:

<body> 
<div id="Content">I am a centered DIV</div> 
</body>

To będzie poziomo środkowe elementy poziomu bloku. Aby wyśrodkować tekst, przęseł lub innych elementów wbudowanych wszystko trzeba by dodać to:

#Content { 
    width:500px; 
    margin:0px auto; 
    text-align:center; /* THIS IS THE ONLY CHANGE FROM ABOVE */ 
    padding:15px; 
    border:1px dashed #333; 
    background-color:#eee; 

    }

JAK pionowo CENTRE bloku ITEM (jak div) lub wcięcia punkcie (jak tekst)

Uwaga: Nie używaj linii o wysokości do pionowych elementów środkowych, ponieważ działa ona tylko dla jednego wiersza tekstu i nic więcej.

Jeśli chodzi o elementy centrujące w pionie, istnieje 3-5 metod, których można użyć w zależności od , co to jest próbujesz wyśrodkować.

Ta strona opisuje każdy sposób łatwo dla ciebie: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Powodzenia!

Źródło

2011-11-18 19:31:38 Downpour046

Należy dać taką samą wartość line-height i wysokość.

#center-in-bar li 
{ 
height: 30px 
line-height: 30px; 
text-align: center;}

również spojrzeć na to: Text align vertical within li

Źródło

2012-05-25 11:50:11 efirat

CSS: Wyśrodkuj tekst zarówno w poziomie, jak iw pionie?

Odpowiedz

Powiązane problemy