Question

我正在创建一个新网站，我需要知道一些事情（将通过示例展示）。

让我说我这样做了：

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元素在水平和垂直方向都居中？在中心元素？

任何帮助都会受到关注：））

Answer 1

试试这个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 */
    ...
}

Answer 2

不知何故，这样做仍然没有标准，但根据我的经验，以下可能是整体上最可靠的解决方案：

<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作为解决方案，但我会恳请你避开这个建议。当你展示像“Hello World”这样简单的东西时它看起来很不错，但是当文本包装时line-height可怕地破坏。

Answer 3

如何以块状项目（如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;
    }

编写此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/

祝你好运！

Answer 4

您应该为行高和高度赋予相同的值。

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

另请注意：Text align vertical within li

CSS：水平和垂直中心文本？

4 个答案: