使用 CSS 进行水平和垂直对齐 [关闭]答案

【问题标题】：Horizonzal and vertical alignment with CSS [closed]使用 CSS 进行水平和垂直对齐 [关闭]
【发布时间】：2014-04-04 20:56:49
【问题描述】：

我需要在 HTML/CSS 中创建一个如下所示的标题：

共有 3 个部分包含不同的元素，始终垂直居中和水平居中。中间部分应该能够接收任意数量的图像。根据用户操作，将添加新图像。

有什么建议吗？

【问题讨论】：

你试过什么？向我们展示您到目前为止所做的代码。
这看起来像一个 WebMasters.SE 问题

标签： html css vertical-alignment centering

【解决方案1】：

这是给你的小提琴：

HTML：

<table class="table">
    <td id="left"> < Back</td>
    <td id="middle"></td>
    <td id="right"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTx_UltN7oNiHFwk7-pGEkunHaXz8Nk3o3-eKNUHzktoZuM-BT7Pg" /></td>
</table>

CSS：

    .table
{
    width:100%;
    height:88px;
    text-align: center;
    border:1px solid black;
}
#left
{
    width:100px;
    height:88px;
        border:1px solid black;
}

#middle
{
    width:auto;
    height:88px;
        border:1px solid black;
}

#middle img
{
    width:40px;
    height:40px;
}

#right
{
    width:100px;
    height:88px;
        border:1px solid black;
}

JS：

    document.getElementById("middle").innerHTML += '<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTx_UltN7oNiHFwk7-pGEkunHaXz8Nk3o3-eKNUHzktoZuM-BT7Pg" />' ;
document.getElementById("middle").innerHTML += '<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTx_UltN7oNiHFwk7-pGEkunHaXz8Nk3o3-eKNUHzktoZuM-BT7Pg" />' ; // and so on....

http://jsfiddle.net/M7Lj5/2/

希望这会有所帮助。

【讨论】：

【解决方案2】：

您可以使用表格来构建所有现代网络的布局按钮而不使用表格，您可以使用 div 并更改与表格布局相对应的显示属性，如下所示

HTML：

<div class="table">
<div class="row">
    <div class="cell1">&lt;Button</div>
    <div class="cell2">
        <img src="http://donaldmurrayexpat.com/wp-content/uploads/2014/02/Cool-2.jpg"/>
        <img src="http://donaldmurrayexpat.com/wp-content/uploads/2014/02/Cool-2.jpg"/>
        <img src="http://donaldmurrayexpat.com/wp-content/uploads/2014/02/Cool-2.jpg"/>
        <img src="http://donaldmurrayexpat.com/wp-content/uploads/2014/02/Cool-2.jpg"/>
    </div>
    <div class="cell3">&lt;Button</div>
</div>
</div>

CSS：

.table{
width:"100%";
border: 1px solid;
}
img{
width:30px;
height:30px;
}
.row{
display:table-row;
width:100%;
    background:red;
    text-align:center;
}
.cell1{
display:table-cell;
    height:20px;
     vertical-align:middle;
    border: 1px solid;
    padding:20px;
}
.cell2{
display:table-cell;
    height:20px;
     vertical-align:middle;
    border: 1px solid;
    padding:20px;
    width:100%;
}
.cell3{
display:table-cell;
    height:20px;
     vertical-align:middle;
    border: 1px solid;
    padding:20px;
}

Demo Here

【讨论】：

【解决方案3】：

我有一个没有表的灵魂，只有 div：JSFiddle

垂直对齐必须使用填充来完成......但我认为这是一个很好的开始。

<div id="header">
  <div id="left_header"><p>< back</p></div>
  <div id="middle_header">img img img</div>
  <div id="right_header"><p>image</p></div> 
</div>

这里是 CSS：

#header {
        width: 100%;
        height: 88px;
        background-color: red;
    }
    #header div {
        float: left;
    }
    #left_header {
        width: 100px;
        height: 88px;
        background-color: green;
        display:table-cell;
        text-align: center;
        vertical-align:middle;
    }
    #right_header {
        width: 100px;
        height: 88px;
        background-color: green;
        display:table-cell;
        text-align: center;
        vertical-align:middle;
    }
    #middle_header {
        width: calc(100% - 200px);
        height: 88px;
        background-color: yellow;
        display: table-cell;
        text-align: center;
    }

【讨论】：

【解决方案4】：

这里是简单代码，动态代码

http://jsfiddle.net/jeyashri_shri/q5z4B/7/

HTML：

 <table border="1" width="100%" height="50%">
 <tr >
 <td>Left</td>
 <td>
 <img src=""/>
 <img src=""/>
 <img src=""/>
 <img src=""/>
 </td>
 <td>Right</td>
 </tr>

CSS：

 table td{border-left:0;border-top:0;border-bottom:0;text-align:center;}
 table td:nth-child(1){width:100px;}
 table td:nth-child(3){border-right:0;width:100px;}  
 td img{width:50px;height:50px;display:inline}

【讨论】：