div id内のh1クラスの整列

Question

"left"が#headerの左部分に、 "link"が中央に、 "right"が右に整列するように、特定のクラスを整列しようとしています＃ヘッダ。 #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

より良いオプションは、ブートストラップグリッドを使用することができます。