2017-03-20 5 views
1

4つのdivが並んでいてページの中央に配置しようとしていますが、4つのdivがすべてコンテナの中に少し残っているようです。コンテナは、ページの中央が、内側のdivではないされサイドバイサイドを中心にしようとしています

{ [Div 1] [Div 2] [Div 3] [Div 4]   } 

は次のようになります。ここで

はそれぞれのdivのために複製されています私のコードです:

<div class="container-1"> 
<div class="table-col-1"> 
    <div class="border-1"> 
    <div class="table-head-1"> 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
    </div> 
    <div class="text-container"> 
     <p class="table-text">Post and vote on feature suggestions/improvements on UserVoice:</p> 
    <br><a href="#" class="button">OneDrive/ODB web</a> 
    </div> 
    </div> 
    </div> 
<--DIVS 2-4 HERE--> 
</div> 

そして、私のCSS:

.container-1{ 
overflow: hidden; 
margin: 0 auto; 
padding: 0px; 

width: 90%; 
text-align: center; 
border: 3px solid red; 
} 


.table-col-1{ 
padding: 1.5em; 
float: left; 
width: 20%; 
} 

.table-head-1{ 
padding: 1.5em; 
background-color: #515251; 
float: left; 
border-bottom: 2px solid #000000; 
} 

.table-text{ 
font-size: 15px; 
line-height: 18px; 
padding-bottom: 1.5em; 
} 

.text-container{ 
padding-top: 7em; 
padding-bottom: 3em; 
} 

.border-1{ 
border: 2px solid #000000; 
} 

.button{ 
background-color: #d6e042; 
font-weight: bold; 
font-size: 14px; 
padding: 15px; 
} 

このすべてが、今私はここに見つけることができる情報から一緒にパッチを適用したが、私は立ち往生して解決策を見つけることができません。

+2

はStackOverflowのへようこそ!残念ながら、あなたの問題は上記のコードだけでは複製できません。私たちがあなたのお手伝いをするために、あなたの質問を更新して、関連するすべてのコードを[**最小で、完全で、検証可能な例**](http://stackoverflow.com/help/mcve)に表示してください。あなたの問題を解決するためにこれまでに試したことをお聞かせください。詳細については、[**よくある質問をどうやるか**](http://stackoverflow.com/help/how-to-ask)に関するヘルプ記事を参照して、サイトの[**ツアー**](http://stackoverflow.com/tour):) –

+0

これをスタックスニペットにすることができればさらに役立つので、ここで結果を見ることができます。 – domsson

+0

あなたはfloat:leftを使用しています。幅:20% 4つのdiv(80%のスペースが使用されています)しかないので、右側のスペースは100%になる20%のスペースがありません。 – Omega

答えて

3

float: leftからdisplay: inline-blockに変更すると、要素が中央に配置されます。

.container-1 { 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    padding: 0px; 
 
    width: 90%; 
 
    text-align: center; 
 
    border: 3px solid red; 
 
} 
 

 
.table-col-1 { 
 
    padding: 1.5em; 
 
    width: 20%; 
 
    display: inline-block; 
 
} 
 

 
.table-head-1 { 
 
    padding: 1.5em; 
 
    background-color: #515251; 
 
    float: left; 
 
    border-bottom: 2px solid #000000; 
 
} 
 

 
.table-text { 
 
    font-size: 15px; 
 
    line-height: 18px; 
 
    padding-bottom: 1.5em; 
 
} 
 

 
.text-container { 
 
    padding-top: 7em; 
 
    padding-bottom: 3em; 
 
} 
 

 
.border-1 { 
 
    border: 2px solid #000000; 
 
} 
 

 
.button { 
 
    background-color: #d6e042; 
 
    font-weight: bold; 
 
    font-size: 14px; 
 
    padding: 15px; 
 
}
<div class="container-1"> 
 
<div class="table-col-1"> 
 
    <div class="border-1"> 
 
    <div class="table-head-1"> 
 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
 
    </div> 
 
    <div class="text-container"> 
 
     <p class="table-text">Post and vote on feature suggestions/improvements on UserVoice:</p> 
 
    <br><a href="#" class="button">OneDrive/ODB web</a> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    <div class="table-col-1"> 
 
    <div class="border-1"> 
 
    <div class="table-head-1"> 
 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
 
    </div> 
 
    <div class="text-container"> 
 
     <p class="table-text">Post and vote on feature suggestions/improvements on UserVoice:</p> 
 
    <br><a href="#" class="button">OneDrive/ODB web</a> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    <div class="table-col-1"> 
 
    <div class="border-1"> 
 
    <div class="table-head-1"> 
 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
 
    </div> 
 
    <div class="text-container"> 
 
     <p class="table-text">Post and vote on feature suggestions/improvements on UserVoice:</p> 
 
    <br><a href="#" class="button">OneDrive/ODB web</a> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    <div class="table-col-1"> 
 
    <div class="border-1"> 
 
    <div class="table-head-1"> 
 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
 
    </div> 
 
    <div class="text-container"> 
 
     <p class="table-text">Post and vote on feature suggestions/improvements on UserVoice:</p> 
 
    <br><a href="#" class="button">OneDrive/ODB web</a> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div>

それとも、フレキシボックスを使用することを好む場合は、.container-1display: flex; justify-content: center;を適用し、.table-col-1からフロートを削除する - かないが、その部分は必要ではなく、親であれば未使用になりますフレックスです。

.container-1 { 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    padding: 0px; 
 
    width: 90%; 
 
    text-align: center; 
 
    border: 3px solid red; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.table-col-1 { 
 
    padding: 1.5em; 
 
    width: 20%; 
 
} 
 

 
.table-head-1 { 
 
    padding: 1.5em; 
 
    background-color: #515251; 
 
    float: left; 
 
    border-bottom: 2px solid #000000; 
 
} 
 

 
.table-text { 
 
    font-size: 15px; 
 
    line-height: 18px; 
 
    padding-bottom: 1.5em; 
 
} 
 

 
.text-container { 
 
    padding-top: 7em; 
 
    padding-bottom: 3em; 
 
} 
 

 
.border-1 { 
 
    border: 2px solid #000000; 
 
} 
 

 
.button { 
 
    background-color: #d6e042; 
 
    font-weight: bold; 
 
    font-size: 14px; 
 
    padding: 15px; 
 
}
<div class="container-1"> 
 
<div class="table-col-1"> 
 
    <div class="border-1"> 
 
    <div class="table-head-1"> 
 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
 
    </div> 
 
    <div class="text-container"> 
 
     <p class="table-text">Post and vote on feature suggestions/improvements on UserVoice:</p> 
 
    <br><a href="#" class="button">OneDrive/ODB web</a> 
 
    </div> 
 
    </div> 
 
    </div> 
 
<div class="table-col-1"> 
 
    <div class="border-1"> 
 
    <div class="table-head-1"> 
 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
 
    </div> 
 
    <div class="text-container"> 
 
     <p class="table-text">Post and vote on feature suggestions/improvements on UserVoice:</p> 
 
    <br><a href="#" class="button">OneDrive/ODB web</a> 
 
    </div> 
 
    </div> 
 
    </div><div class="table-col-1"> 
 
    <div class="border-1"> 
 
    <div class="table-head-1"> 
 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
 
    </div> 
 
    <div class="text-container"> 
 
     <p class="table-text">Post and vote on feature suggestions/improvements on UserVoice:</p> 
 
    <br><a href="#" class="button">OneDrive/ODB web</a> 
 
    </div> 
 
    </div> 
 
    </div><div class="table-col-1"> 
 
    <div class="border-1"> 
 
    <div class="table-head-1"> 
 
    <h1>Issues with OneDrive/ODB on the web?</h1> 
 
    </div> 
 
    <div class="text-container"> 
 
     <p class="table-text">Post and vote on feature suggestions/improvements on UserVoice:</p> 
 
    <br><a href="#" class="button">OneDrive/ODB web</a> 
 
    </div> 
 
    </div> 
 
    </div> </div>

+0

ありがとう!この問題を抱えている人は、私はすべてのfloat:leftsを置き換えました。 display:インラインブロック;それは働いた! – mp849

+0

@ mp849問題ありません。また、フレックスボックスソリューションで私の答えを更新しました。 –

2

私はあなたが何を得ようとしているのか知っていると思います。

私の答えはフレックスボックスを使用しています。フレックスボックスはまだ実装していないときに恐ろしい音がするのは知っていますが、次のリンクをご覧ください。彼らは素晴らしいです。 display: flexflex-direction: rowjustify-content: centerを使用して

https://codepen.io/sequential/pen/LxvJrr

は、達成するためにこのフォーマットのタスクが容易になります。

また、これはさらに読むための良い記事です。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

・ホープ、このことができますし、スタックオーバーフローを歓迎!

+0

ええと私はディスプレイのフレックスを試したが、うまくいかなかった。 :/ – mp849

+0

@ mp849興味深いことに、あなたは答えが見つかったのでうれしく思っています:) – Sequential

+1

@Sequential pro-tip - デモを作成する場合はOPのコードで作成してください。彼らはおそらく間違ったセレクタや何かにプロパティを適用しました。 –

関連する問題