CSSを使って要素をインライン化する方法

Question

私は自分のウェブサイトのトップにメニューバーを作ろうとしています。 このようにしてください：

赤い四角はマイボタンです。

私の問題は、私の見出しと私のボタンが同じ行にないことです。だから私はテーブルを使用しようとしましたが、両方が左に揃っています。 その後、私のボタンにfloat: right;を使用しました。 これは右揃えですが、次の行に配置されました。

私のボタンと私の見出しが同じ行にあり、私の画像のように整列するように、どうすれば修正できますか？

HTML：

<div id="topbar"> 
    <h1>Fahrplan</h1> 
    <button type="button" id="settings"></button> 
</div> 

CSS：シナリオのこの種の

h1 { 
    height: 44px; 
    margin: 0; 
    color:#FFFFFF; 
    text-align: center; 
    font-family: Helvetica, sans-serif; 
    font-size: 16px; 
    line-height: 44px; 
} 
#topbar button { 
    height: 20px; 
    width: 20px; 
    float: right; 
} 

Answer 1

は、あなたがposition Sを使用して検討するかもしれません。ここで

#topbar { 
 
    position: relative; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    color:#FFFFFF; 
 
    text-align: center; 
 
    font-family: Helvetica, sans-serif; 
 
    font-size: 16px; 
 
    line-height: 44px; 
 
    background: #99f; 
 
} 
 
#topbar button { 
 
    height: 20px; 
 
    width: 20px; 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 5px; 
 
    margin-top: -10px; 
 
}

<div id="topbar"> 
 
    <h1>Fahrplan</h1> 
 
    <button type="button" id="settings"></button> 
 
</div>

私は#topbarとボタンの両方にpositionを与えています。 #topbarはrelative位置を持っており、ボタンがabsoluteポジションがあります：

#topbar { 
    position: relative; 
} 
button { 
    position: absolute; 
    top: 50%; 
    right: 5px; 
    margin-top: -10px; 
} 

をそして私はまた、縦方向に半分の高さの負のマージンを使用することによってセンタリングされるボタンを調整しています。お役に立てれば。

Answer 2

absoluteと一緒にtranslateY()を使用して、ボタンを垂直に中央に配置することをお勧めします。私は右にあなたのボタンを移動するposition: absolute;を使用しています

：

Demo：

header { 
    height: 40px; 
    background: tomato; 
    position: relative; 

    h4 { 
    line-height: 40px; 
    text-align: center; 
    } 

    button { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    right: 10px; 
    } 
} 

説明（注jsFiddleにSCSSを使用していますので、構文と混同得ることはありません）。ボタンの垂直方向のセンタリングが行われる限り、top: 50%とtransformを使用すると、ヘッダーの真ん中にボタンを正確に押し込むことができます。静的と宣言することなく常に垂直方向に中央に置かれますheight。

Answer 3

ヘッドラインの浮動プロパティを指定します。

.classNameGiveToHeading { 
    float: left; 
} 
.buttonClassName { 
    float: right; 
} 

OR与える "フロート：右" それらの両方に、あなたは好きなように。 .br2 { 国境半径：

Answer 4

はここhttp://tachyons.io

<div class="bg-light-gray dt w-100"> 
    <div class="dtc v-mid w3"></div> 
    <div class="dtc v-mid tc pv3"> 
    <h1 class="mv0 f5">Headline</h1> 
    </div> 
    <div class="dtc v-mid tr w3 pr2"> 
    <button class="bg-black br2 h2 w2"></button> 
    </div> 
</div> 

CSSを使ってこれを行う方法の簡単なデモです：。25rem; }

.dt { 
    display: table; 
} 

.dtc { 
    display: table-cell; 
} 

.h2 { 
    height: 2rem; 
} 

.w2 { 
    width: 2rem; 
} 

.w3 { 
    width: 4rem; 
} 

.w-100 { 
    width: 100%; 
} 

.bg-black { 
    background-color: #111; 
} 

.bg-light-gray { 
    background-color: #eee; 
} 

.pr2 { 
    padding-right: .5rem; 
} 

.pv3 { 
    padding-top: 1rem; 
    padding-bottom: 1rem; 
} 

.mv0 { 
    margin-top: 0; 
    margin-bottom: 0rem; 
} 

.tr { 
    text-align: right; 
} 

.tc { 
    text-align: center; 
} 

.f5 { 
    font-size: 1rem; 
} 

.v-mid { 
    vertical-align: middle; 
} 

デモ： https://jsfiddle.net/r21mdrzs/

欠点は、あなたが空のdivが含まれていることです。プラスの面は、ズームインまたはズームアウトしても、ボタンのフォントサイズやサイズを変更しても、すべてが常に中央に揃えられます。これは私の経験では、魔方陣の数値を使って配置するよりも脆弱ではありません。

Answer 5

ご興味のある方は、インラインブロックを使用してください。

div > * { 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
} 
 
h1 { 
 
    width:100%; 
 
    text-align:center; 
 
    margin-right:-40px; 
 
    background-color:#4F81BD; 
 
    color:#FFF; 
 
    font-family: Helvetica, sans-serif; 
 
    font-size: 16px; 
 
    height: 44px; 
 
} 
 
button { 
 
    height: 30px; 
 
    width: 30px; 
 
    margin-right:-6px; 
 
    border: 3px solid #8C3836; 
 
    border-radius:5px; 
 
    background-color:#C0504D; 
 
}

<div id="topbar"> 
 
    <h1>Fahrplan</h1> 
 
    <button type="button" id="settings"></button> 
 
</div>