div要素の中央と右の位置合わせ

以下に示すHTML5/CSS3/JSの4つのタブがあります。div要素の中央と右の位置合わせ

私は、ページの中央にすべての4つのタブの位置を特定するために、親のdivのためのタブのdivのためのdisplay:inline-block;とtext-align:centerを使用しています。

<div class='parent'> 
    <div class='tabItem'>YOU</div> 
    <div class='tabItem'>DATABASE</div> 
    <div class='tabItem'>TASKS</div> 
    <div class='tabItem'>HELP</div> 
</div>

CSS3に：

.parent{text-align:center;} 
.tabItem{display:inline-block;}

は、今私がDATABASEおよびタスクすなわちYOU、ページの右側にあるHELP、およびタブの残りの部分、すなわち、タブのうちの2つを見つけたいですページの中心。私はそれをどうやってできるのだろうか。

div要素をページの自然な流れに従うことが好ましいです。

出典

2017-02-22 user3405291

[、最小完全、かつ検証例]を提供してください（http://stackoverflow.com/help/mcve）あなたの試みの例[Stack Snippet]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）であり、一部のコードスニペットではありません。 – andreas

fiddleを参照してくださいhttps://jsfiddle.net/cz1tn1zm/ –

を '.parent {text-align：center;}'とすると、すべての子divが中央揃えされます。あなたは 'YOU'と' HELP'を右揃えにしますか？あなたが欲しいものを明確に説明してください – kampangala

ここがあなたの解決です！

.parent{text-align:center;} 
 
.tabItem{display:inline-block;} 
 
.right { 
 
float: right; 
 
}

<div class='parent center'> 
 
    <div class='tabItem'>DATABASE</div> 
 
    <div class='tabItem'>TASKS</div> 
 
     <div class='parent right'> 
 
     <div class='tabItem'>YOU</div> 
 
     <div class='tabItem'>HELP</div> 
 
     </div> 
 
</div>

出典

2017-02-22 08:52:50 MKAD

この情報がお役に立てば幸いです！

<html> 
    <head> 
    <style> 
     .parent{text-align:center;} 
     .tabItem{display:inline-block;} 
     #right {float: right;} 
    </style> 
    </head> 
    <body> 
    <div class='parent'> 
     <div class='tabItem'>DATABASE</div> 
     <div class='tabItem'>TASKS</div> 
     <div id="right" class='tabItem'>YOU</div> 
     <div id="right" class='tabItem'>HELP</div> 
    </div> 
    </body> 
</html>

または、これらの2つのdivを親コンテナに入れて、IDを繰り返すのを避けるためにid = "right"を付けてください。

出典

2017-02-22 08:56:19

そして、私はあなたが絶対位置に再配置する必要があるタブを設定する必要がありますだと思うので、彼らは通常のコンテンツの流れの外になります。この

.parent{text-align:center;} 
 
.tabItem{display:inline-block;} 
 
.right{float:right;} 
 
.left{float:left;}

<div class='parent'> 
 
    <div class='tabItem left'>Content for Left</div> 
 
    <div class='tabItem'>DATABASE</div> 
 
    <div class='tabItem'>TASKS</div> 
 
    <div class='tabItem right'>YOU</div> 
 
    <div class='tabItem right'>HELP</div> 
 
</div>

出典

2017-02-22 08:59:07

ような何かを行います他の2つのタブを真に中央に置くことができます。

.parent { 
 
    background: pink; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.tabItem { 
 
    margin: 0 5px; 
 
    display: inline-block; 
 
    background: aqua; 
 
} 
 
.tabItem:nth-child(1) { 
 
    position: absolute; 
 
    right: 50px; /* width of "HELP" tab */ 
 
} 
 
.tabItem:nth-child(4) { 
 
    position: absolute; 
 
    right: 0; 
 
}

<div class='parent'> 
 
    <div class='tabItem'>YOU</div> 
 
    <div class='tabItem'>DATABASE</div> 
 
    <div class='tabItem'>TASKS</div> 
 
    <div class='tabItem'>HELP</div> 
 
</div>

出典

2017-02-22 20:34:01 Stickers

CSS3の機能display:flexあまりにもオプションです。それが動作するかどうかを確認するためにそれを再生することができます。

.parent{ 
 
    display:flex; 
 
    justify-content:center; 
 
} 
 

 
.item{ 
 
    padding: 10px; 
 
    text-transform:uppercase; 
 
} 
 

 
.right{ 
 
    margin-left:auto; 
 
} 
 

 
.left{ 
 
    margin-right:auto; 
 
}

<div class="parent"> 
 
    <div class="item left">you</div> 
 
    <div class="item">database</div> 
 
    <div class="item">tasks</div> 
 
    <div class="item right">help</div> 
 
</div>

出典

2017-02-27 07:25:02 user3405291

div要素の中央と右の位置合わせ

答えて

関連する問題