Fatal编程技术网
  • html/
  • Html 如何将列表居中

Html 如何将列表居中

html css

Html 如何将列表居中,html,css,Html,Css,如果我的html页面上有列表： <body> <div id="side-bar">...</div> <div id="list"> <select id="mylist" size="10"></select> </div> </body> ... 如何将MISLIST定位在>/Cuff>区域的中间？（水平方向和垂直方向）一种#list{text align:center；}样

如果我的html页面上有
列表：

<body>
<div id="side-bar">...</div>
<div id="list">
       <select id="mylist" size="10"></select>
</div>
</body>


...

如何将MISLIST定位在>/Cuff>区域的中间？（水平方向和垂直方向）

一种
#list{text align:center；}
样式应该可以做到这一点，尽管这将使div中的所有内容水平居中

要水平居中选择
元素，可以使用
#mylist{margin:0px auto；}
。查看更多关于如何工作的详细信息

为了垂直居中，“最简单”的方法是使用一个HTML表格，其单元格样式包含
vertical align:middle。对于非基于表的方法，您可以使用类似的方法，但这种方法有点粗糙

如果您知道（或可以设置）包含的
div
的高度，则
相对的
和
绝对的
定位组合以及
选择的包含
div
可能适合您


<html>
    <head>
        <style type="text/css">
        div
        {
            border: 1px solid black; /* just so we can see the div */
        }
        #list
        {
            height: 400px;
            position: relative;
        }
        #list div
        {
            position:absolute;
            top: 100px;
            text-align: center;
            width: 100%;
        }
        </style>
    </head>
    <body>
        <div id="list">
            <div>
                <select id="mylist" size="10"><option>option 1</option><option>option 2</option></select>
            </div>
        </div>
    </body>
</html>




div
{
边框：1px纯黑；/*这样我们就可以看到div了*/
}
#名单
{
高度：400px；
位置：相对位置；
}
#名单组
{
位置：绝对位置；
顶部：100px；
文本对齐：居中；
宽度：100%；
}
选项1选项2


（我已经在IE9、FireFox 4和Chrome 11中对此进行了测试）
一种
#list{text align:center；}
样式应该可以做到这一点，尽管这将使div中的所有内容水平居中

要水平居中选择
元素，可以使用
#mylist{margin:0px auto；}
。查看更多关于如何工作的详细信息

为了垂直居中，“最简单”的方法是使用一个HTML表格，其单元格样式包含
vertical align:middle。对于非基于表的方法，您可以使用类似的方法，但这种方法有点粗糙

如果您知道（或可以设置）包含的
div
的高度，则
相对的
和
绝对的
定位组合以及
选择的包含
div
可能适合您


<html>
    <head>
        <style type="text/css">
        div
        {
            border: 1px solid black; /* just so we can see the div */
        }
        #list
        {
            height: 400px;
            position: relative;
        }
        #list div
        {
            position:absolute;
            top: 100px;
            text-align: center;
            width: 100%;
        }
        </style>
    </head>
    <body>
        <div id="list">
            <div>
                <select id="mylist" size="10"><option>option 1</option><option>option 2</option></select>
            </div>
        </div>
    </body>
</html>




div
{
边框：1px纯黑；/*这样我们就可以看到div了*/
}
#名单
{
高度：400px；
位置：相对位置；
}
#名单组
{
位置：绝对位置；
顶部：100px；
文本对齐：居中；
宽度：100%；
}
选项1选项2



（我已经在IE9、FireFox 4和Chrome 11中对此进行了测试）
您可以这样使用


#mylist{margin-left auto; margin-right:auto;}



你可以这样用


#mylist{margin-left auto; margin-right:auto;}


你可以试试
#mylist{margin:0 auto}
。它仅使选定元素居中。如果要将div中的所有内容居中，那么
#list{text align:center；}
应该可以做到这一点

编辑：

要垂直和水平居中选择标记，可以执行以下操作：


<style type="text/css">
#list {
    width: 200px;
    height: 200px;
    background: #fa2;
}
#mylist {
    width: 100px;
    line-height: 20px;
    position: relative;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -50px;
}
</style>
<div id="list">
       <select id="mylist">
           <option value="1">test</option>
       </select>
</div>




#名单{
宽度：200px；
高度：200px；
背景：#fa2；
}
#迈利斯特{
宽度：100px；
线高：20px；
位置：相对位置；
最高：50%；
左：50%；
余量：-10px0-50px；
}
测试

您可以尝试
#mylist{margin:0 auto}
。它仅使选定元素居中。如果要将div中的所有内容居中，那么
#list{text align:center；}
应该可以做到这一点

编辑：

要垂直和水平居中选择标记，可以执行以下操作：


<style type="text/css">
#list {
    width: 200px;
    height: 200px;
    background: #fa2;
}
#mylist {
    width: 100px;
    line-height: 20px;
    position: relative;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -50px;
}
</style>
<div id="list">
       <select id="mylist">
           <option value="1">test</option>
       </select>
</div>




#名单{
宽度：200px；
高度：200px；
背景：#fa2；
}
#迈利斯特{
宽度：100px；
线高：20px；
位置：相对位置；
最高：50%；
左：50%；
余量：-10px0-50px；
}
测试

我可能会选择：


#list {
    width: 100px;
    height: 250px;
    background: #ccc;
    text-align: center;
    display: table-cell;
    vertical-align: middle
}



    

  • 文本对齐：居中
    水平居中
    • 

  • 显示：表格单元格；垂直对齐：从中间到垂直居中
    • 


这将适用于IE8+和所有现代浏览器

见：我可能会选择：


#list {
    width: 100px;
    height: 250px;
    background: #ccc;
    text-align: center;
    display: table-cell;
    vertical-align: middle
}



    

  • 文本对齐：居中
    水平居中
    • 

  • 显示：表格单元格；垂直对齐：从中间到垂直居中
    • 


这将适用于IE8+和所有现代浏览器


 <强> >：<强> > /p>嗨，我已经改变了我的问题，我想把MyLIST放在div ID＝“列表”区域的中间。正如您在上面看到的，我在页面上也有侧栏区域。@Leem:Selects是内联元素，因此仍然应该这样做。为了防止这种情况，您可以在#list内部创建一个单独的div，如#list#u容器，即“text align:left；margin:0 auto；”和一个设置的宽度。这会使列表集中在没有对齐文本的情况下。您的方法只将列表水平放置为中心，而不是垂直。嗨，我已经改变了我的问题，我想把MyLIST放在div ID＝“列表”区域的中间。正如您在上面看到的，我在页面上也有侧栏区域。@Leem:Selects是内联元素，因此仍然应该这样做。为了防止这种情况，您可以在#list内部创建一个单独的div，如#list#u容器，即“text align:left；margin:0 auto；”和一个设置的宽度。这将使列表居中，而不使文本居中。您的方法仅将列表水平放置为中心，而不是垂直放置。您好，我尝试了#list{text align:center；}，但您的方法仅将列表水平放置为中心，而不是垂直放置。您好，我尝试了#list{text align:center；}，但是您的方法只将列表水平放置在中心，而不是垂直放置。这只会使列表中的文本居中