2つのスパンがdivの中心にないのはなぜですか？

私はdivの2つのスパンの中心にしたいが、私は失敗した、それを修正する方法は？次のようなコードは有効ではありませんが、私は2つのスパンのうちdivを置くと、表示プロパティがinline-blockに変更されている間に効果的になります。2つのスパンがdivの中心にないのはなぜですか？

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.topbar{ 
 
    border: 1px solid; 
 
    max-width: 800px; 
 
    height: 20px; 
 
} 
 
.inner1{ 
 
    float: left; 
 
    border: 1px solid red; 
 
} 
 
.inner2{ 
 
float: left; 
 
    border: 1px solid red; 
 
} 
 
.clearfix::after{ 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
} 
 
.topbar{ 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" /> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="topbar "> 
 
    
 
    <span class="inner1">register</span> 
 
    <span class="inner2">login</span> 
 
    
 
</div> 
 
    
 
</body> 
 
</html>

出典

2017-11-21 jack hwwa

内側のCSSの両方で 'position：absolute'を試してください。 – Ahtisham

あなたはので、両方のスパンでfloat: left;のそれを中央にすることはできません。 float: left;を削除すると、中央に移動します。

ディスプレイinline-blockでdivの中にスパンをラップすると機能します。それはfloat: leftを持たないのでdivが中心になり、スパンは中心にあるdivの内側にfloat: leftになります。あなたがそれを持っているといいでしょう:)

出典

2017-11-21 03:45:24 Cons7an7ine

float: leftはinner1クラスとinner2クラスにあり、それらはスパンを左に移動します。それらを削除するだけで正常に動作します。以下は更新されたコードです。

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.topbar{ 
 
    border: 1px solid; 
 
    max-width: 800px; 
 
    height: 20px; 
 
} 
 
.inner1{ 
 
    border: 1px solid red; 
 
} 
 
.inner2{ 
 
    border: 1px solid red; 
 
} 
 
.clearfix::after{ 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
} 
 
.topbar{ 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" /> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="topbar "> 
 
    
 
    <span class="inner1">register</span> 
 
    <span class="inner2">login</span> 
 
    
 
</div> 
 
    
 
</body> 
 
</html>

出典

2017-11-21 03:47:52 KKK

別のアプローチは、ちょうどフレキシボックスモデルを使用している可能性があります。簡単ですし、コードも短いです。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.topbar { 
 
    border: 1px solid; 
 
    max-width: 800px; 
 
    height: 20px; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.topbar span { 
 
    border: 1px solid green; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" /> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="topbar "> 
 
    
 
    <span class="inner1">register</span> 
 
    <span class="inner2">login</span> 
 
    
 
</div> 
 
    
 
</body> 
 
</html>

PS：同じプロパティを共有し、両方のため、また、代わりにinner1とinner2を使用しての、コードを短くするために、私はCSSで.topbar spanを使用。

出典

2017-11-21 04:27:42 necixy

2つのスパンがdivの中心にないのはなぜですか？

答えて

関連する問題