HTML/CSS：リフロー後の横方向の中央のテキスト

Question

これまでに返信されていると確信していますが、どこにも見つからないようです。

私はリンクを備えたツールバーがあります。

私は、ブラウザのサイズを変更すると、テキストがリフロー：

を質問は、私は、リフロー後にそのテキストを中央に行う方法です？ text-alignはこちらでは役に立ちません。どちらもmargin: 0 autoです。

HTMLは次のようになります。これは、インラインブロックとして各要素を処理し、ALIGN-中心を加えるように見える

.desktop { 
    display:       flex; 
    align-items:      center; 
} 
.root-nav-links { 
    margin:        0 15px; 
    padding:       2px 6px; 
} 

Answer 1

使用display: block & text-align: centerプロパティ、：

.desktop { 
 
    display: flex; 
 
    align-items: center; 
 
    background: #6440C0; 
 
    padding: 10px 0; 
 
} 
 
.root-nav-links { 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: center; 
 
    margin: 0 15px; 
 
    padding: 2px 6px; 
 
    color: white; 
 
} 
 

 
.root-nav-links:hover { 
 
    color: white; 
 
    text-decoration: underline; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<div class="desktop"> 
 
    <div> 
 
    <a class="root-nav-links" href="/eventdetails">Event Details</a> 
 
    </div> 
 
    <div> 
 
    <a class="root-nav-links" href="/schedule">Schedule</a> 
 
    </div> 
 
    <div> 
 
    <a class="root-nav-links" href="/floorplan">Floor Plan</a> 
 
    </div> 
 
    <div> 
 
    <a class="root-nav-links" href="/details">Directory</a> 
 
    </div> 
 
</div>

：

.root-nav-links { 
    display: block; 
    text-align: center; 
    margin:0 15px; 
    padding:2px 6px; 
} 

は以下のスニペット（ブラウザの幅を圧縮してみてください）を見てください

これが役立つことを願っています！

Answer 2

.desktop { 
 
    display:       flex; 
 
    align-items:      center; 
 
} 
 
.root-nav-links { 
 
    margin:        0 15px; 
 
    padding:       2px 6px; 
 
    display: inline-block; 
 
    text-align: center; 
 
}

<div class="desktop"> 
 
    <div> 
 
    <a class="root-nav-links" href="/details">Event Details</a> 
 
    </div> 
 
    <div> 
 
    <a class="root-nav-links" href="/details">Long Long Word</a> 
 
    </div> 
 
</div>

：

<div class="desktop"> 
    <div> 
    <a class="root-nav-links" href="/details">Event Details</a> 
    </div> 
    <div> 
    <a class="root-nav-links" href="/details">...</a> 
    </div> 
    ... 
</div> 

がCSSそれらに単語が強制されるときにテキストを中央に置くべきである複数の行にコメントに基づいて、私はあなたが尋ねていたことは今はそれほど確かではないと確信しています。以下のような.root-nav-links上

Answer 3

それはこのようにする必要があります： Htmlの

<div class="desktop"> 
    <div class="extra-div"> 
    <a class="root-nav-links" href="/details">Event Details</a> 
    </div> 
</div> 

のCss：

.extra-div { 
    display:flex; 
    align-items: center; 
} 
.root-nav-links { 
    margin: 0 15px; 
    padding: 2px 6px; 
} 

jsfiddle：https://jsfiddle.net/622L0mqz/

Answer 4

div - >text-align: center

リンク - >block

.desktop { 
 
    display: flex; 
 
    align-items: center; 
 
    align-content: center; 
 
} 
 

 
.desktop div { 
 
    text-align: center; 
 
} 
 

 
.root-nav-links { 
 
    display: block; 
 
    margin: 0 15px; 
 
    padding: 2px 6px; 
 
}

<div class="desktop"> 
 
    <div> 
 
    <a class="root-nav-links" href="/details">Event Details</a> 
 
    </div> 
 
    <div> 
 
    <a class="root-nav-links" href="/details">...</a> 
 
    </div> 
 
</div>