別のスパンより下のスパン

Question

私はスパンを含めてお互いの下に2つの段落を持っています。 上部スパンには「Auftrag 1-3」というテキストがあり、下位には「Download」があります。

"Auftrag 1-3"の下に直接センタリングされた下部スパン（ダウンロード）が必要です。

今のところ中央のものだけが完全に中央に配置されていますので、上記のテキストを理解していない場合はhttp://beta.playlikelars.de/iv.phpをご覧ください。

#content1 p { 
 
    text-align: center; 
 
    font-family: "Montserrat", sans-serif; 
 
    font-weight: bold; 
 
    font-size: xx-large; 
 
} 
 

 
#content1 .top { 
 
    background: rgb(11, 81, 146); 
 
    margin-right: 15px; 
 
    padding: 15px; 
 
    color: white; 
 
} 
 

 
#content1 .bottom { 
 
    background: #d6d6d6; 
 
    padding: 15px; 
 
    margin-right: 15px; 
 
    color: white; 
 
}

<div id="content1"> 
 

 
    <p> 
 
    <span class="top">Auftrag 1</span> 
 
    <span class="top">Auftrag 2</span> 
 
    <span class="top">Auftrag 3</span> 
 
    </p> 
 

 
    <p> 
 
    <span class="bottom">Download</span> 
 
    <span class="bottom">Download</span> 
 
    <span class="bottom">Download</span> 
 
    </p> 
 

 
</div>

Answer 1

<p>と<span>タグ、テーブルを使用していません。テーブルは、これを行うための最短かつ明確な方法です。確認して、その後

span { 
 
    text-align: center; 
 
    display: table-cell; 
 
} 
 

 
p { 
 
    display: table-row; 
 
} 
 

 
div { 
 
    display: table; 
 
}

<div> 
 
    <p> 
 
    <span>Auftrag 1</span> 
 
    <span>Auftrag 2</span> 
 
    <span>Auftrag 3</span> 
 
    </p> 
 
    <p> 
 
    <span>Download</span> 
 
    <span>Download</span> 
 
    <span>Download</span> 
 
    </p> 
 
</div>

Answer 2

その優れたが自分のdivの中にボタンを分離するために、そして：

td { 
 
    text-align: center; 
 
}

<table> 
 
    <tr> 
 
    <td>Auftrag 1</td> 
 
    <td>Auftrag 2</td> 
 
    <td>Auftrag 3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Download</td> 
 
    <td>Download</td> 
 
    <td>Download</td> 
 
    </tr> 
 
</table>

CSSプロパティdisplay: tableもこれを模倣することができます要素を中央に置いておきたい場合は、両側にマージンを与えます。テキストを中心にしたい場合は、text-align: center;は要素のコンテンツを中央に配置します。

.container { 
 
    display: flex; 
 
} 
 

 
.container-btns { 
 
    margin: 15px; 
 
} 
 

 
.top { 
 
    text-align: center; 
 
    background: #ccc; 
 
    padding: 10px; 
 
} 
 

 
.bottom { 
 
    text-align: center; 
 
    background: blue; 
 
    color: #fff; 
 
    padding: 10px; 
 
}

<div class="container"> 
 
    <div class="container-btns"> 
 
    <div class="top">Auftrag 1</div> 
 
    <div class="bottom">Download</div> 
 
    </div> 
 

 
    <div class="container-btns"> 
 
    <div class="top">Auftrag 3</div> 
 
    <div class="bottom">Download</div> 
 
    </div> 
 

 
    <div class="container-btns"> 
 
    <div class="top">Auftrag 2</div> 
 
    <div class="bottom">Download</div> 
 
    </div> 
 
</div>