div2を中央揃えにし、div3を右側にしたいと思います。CSSを使って1 divの中心合わせとその他の浮動小数点を作る方法
私は、テキストの整列であることをやってみました：メインのdivのためのセンターを、右DIV3にフロートを作るが、それは、メインのdivの残りの部分を考慮して中央揃えなっています。私は、ディスプレイを与えている：インラインフレックスメインのdiv
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>にごDIV2要素にstyle="margin: auto;"を追加します。 div3要素に style="margin-left: auto;"と入力します。
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="margin:auto; height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="margin-left:auto; height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>動作しますが、添付された2番目のイメージのように結果が出ます。私はdiv 2のメインdivの幅を考慮し、中心に揃えたい。今度はwidth = main div - div3とみなして、次に起こると思われるものではない中心に整列させます。 –
コードスニペットを追加して回答を編集しました。それに応じて、あなたは必要な変更は何ですか？ –
.main {
display: block;
position: relative;
width:100%;
text-align: center;
border: 1px solid red;
}
.main .div1 {
display: inline-block;
border: 1px solid;
}
.main .div2 {
float: right;
border: 1px solid;
display: inline-block;
}<div class="main">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>あなたが真ん中に配置し、左右に自動のマージンを使用できるようにdivタグは、ブロックレベル要素です。
.center {
margin: 0 auto;
}
.right {
float: right;
}
HTMLでは、divの順序を調整する必要があります。それはまた、
<div class="outer">
<div class="right"></div>
<div class="center"></div>
</div>
は、あなたが他のdivにメインのためposition:relative、およびposition:absoluteを使用することができ、そして：あなたがそれをフロートするとき、彼らは同じ行に表示されるようにdivの2の前にdiv要素3を入れてセンターそれ縦
.main {
text-align: center;
background-color: red;
height: 50px;
position: relative;
}
.div2 {
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.div3 {
background-color: green;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
}<div class="main">
<div class="div2">SOME DIV 2</div>
<div class="div3">SOME DIV 3</div>
</div>それは私のために働いた。ありがとう –
このコードを試してください：
<div style="height: 40px;width:120px;background-color: yellow;align-items: center; position:relative;">
<div style="height: 20px;width:40px;background-color: red; overflow:auto; margin:0 auto">
Hello
</div>
<div style="height: 20px;position:absolute; right:0px; top:0px; width:20px;background-color: red;">
</div>
</div>
ここをチェック[https://jsfiddle.net/gfeo88fe/] –
.contentmain{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: left;
background:red;
}
.contentCenter{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 30%;
float: left;
background:yellow;
}
.contentRight{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: right;
background:red;
}<div class="contentmain">
\t \t Main<br/>
\t \t Content<br/>
\t </div>
\t <div class="contentCenter">
\t \t Center<br/>
\t \t Content<br/>
\t </div>
\t <div class="contentRight">
\t \t Right<br/>
\t \t Content<br/>
\t </div>これはあなたの要件を満たすかもしれません。
<!DOCTYPE html>
<head>
<style>
.div0 {
text-align: center;
border-style: solid;
border-width: 5px;
height: 50px;
border-color: red;
position: relative ;
}
.div1 {
border-style: solid;
border-width: 4px;
right: 0%;
height: 40px;
width:40px;
border-color: green;
position: absolute;
}
.div2 {
left: 50%;
right:50%;
width:40px;
position: absolute;
border-style: solid;
height: 40px;
border-width: 4px;
border-color: green;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1"><p>div1</p></div>
<div class="div2"><p>div2</p></div>
</div>
</body>
</html>
基本的にあなたが位置プロパティを使用することによって、これを達成することができますし、右とが上で見つけることができ、あなたが財産を残し、より上の Positionとrightプロパティを参照することができますCSSの性質を残しましたサイト。
私は右、ほとんどのコーナーにあなたに1つのdiv要素を取得するにはabsoulute
として位置相対と他のサブのdiv（DIV2及びDIV3）として、メインのdivを設定されている私の答えに何をやりましたか右のプロパティを0％
に設定し、div iを中央に配置するには、右と左の両方のプロパティに50％を使用します。
コードが必要です。これまでに試したことを教えてください。 –
divの幅をdivの中心に設定するとき –
下記のコードをご覧ください。私は昨日答えます。[http://stackoverflow.com/questions/43450161/how-can-i-add-3-columns-in-an-html- page-using-css/43450339＃43450339] –