logo标签列表

CSS：如何使文本水平和垂直居中？

csshtml
17

我正在创建一个新的网站，需要了解一些内容（将通过示例展示）。

假设我做了这个：

html;

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

和 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*/
}

我应该怎么做才能让所有的li元素在center-in-bar元素中水平垂直居中？

非常感谢您的帮助：））

垂直居中并不是一项非常容易的任务，实现它的方法取决于特定的标准（有几种不同的方法，但每种方法都有条件）。 - Matthew Cox
4个回答
11
尝试使用这个CSS代码片段：
#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 */
    ...
}
8

目前仍然没有一个标准的方法去处理这个问题，但是根据我的经验，以下解决方案可能是最可靠的：

<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>

这里有另一种利用相对和绝对定位模拟居中位置的技巧。虽然不是完全准确的，但它应该适用于任何浏览器（甚至早期的浏览器）：

<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>

重要提示：

每当有人问起这个问题时，总会有人建议使用line-height作为解决方案，但我强烈建议你避免使用该建议。虽然在演示类似“你好世界”这样简单的文本时看起来很不错，但是line-height在文本换行时表现非常糟糕。

需要注意的是，在某些版本的IE中，“table-cell”方法无法正常工作。 - Sparky
没问题。如果您满意，请不要忘记标记答案。 - James Johnson
0

如何水平居中块级元素（如DIV）或内联元素（如文本）

假设您想要将文档在浏览器页面上居中，以便无论您调整浏览器的大小，该元素始终居中：

    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;
    }

在 body 标签之间编写以下 HTML 以使某物水平居中：

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

这将水平居中块级元素。要居中文本、跨度或其他内联元素，您只需要添加：

    #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;

    }

如何垂直居中块级元素（如DIV）或内联元素（如文本）

注意：不要使用行高来垂直居中元素，因为它只适用于一行文本而已。

至于垂直居中元素，有3-5种方法可以使用，具体取决于您要居中的内容是什么。

这个网站为您轻松描述了每种方法： http://blog.themeforest.net/tutorials/vertical-centering-with-css/

祝你好运！

博客已经无法使用了（themeforest不做301真是可悲，他们的SEO团队太差了），有没有jsfiddle的机会？ - TheBlackBenzKid
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接