在div id

Question

我正在尝试对齐某些类，以便“left”对齐#header的左侧部分，“links”在中心对齐，“right”对齐#header的右侧。我还希望图标与#header中的文本垂直对齐。

jsfiddle链接：https://jsfiddle.net/uhd9h9o6/

#header{
    width:90%;
    height:60px;
    margin: 20 auto;
    position:relative;
    display:block;
    font-family: 'Raleway', sans-serif;
}

.left{
    color:#000;
    text-align: left;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    font-size:24px;
    position:relative;
    width:220px;
    display:block;
    z-index:2;
    margin-left:1.5%;
    height:50px;

}

.right{
    color:#000;
    text-align: left;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    font-size:22px;
    position:relative;
    width:90px;
    display:block;
    z-index:2;
    margin-right:2.5%;
    height:50px;
    vertical-align:bottom;
}

.links{
    color:#000;
    float:left;
    font-size:24px;
    display:block;
    position:relative;
    width:150px;
    margin-top: 0;
    margin-bottom: 0;
    padding:0px;

    }

非常感谢任何帮助！

Answer 1

您的jsfiddle示例正在使用.left和text-align:center，同样也使用.right。

您可以根据标题栏中的每个元素使用宽度，而不是使用text-align。

示例：

--------------------------------------
|             |        |             |
| header-left | center | header-right|
|             |        |             | 
--------------------------------------
width:33%       33%        33%

取决于没有。元素，像css grids

更好的选择，你可以使用bootstrap-grid。