1

幅と高さが設定されたコンテナが必要です。そのコンテナ内には次のものがあります。

  • 縦横中央揃えのテキスト

  • コンテナの左側に垂直方向に中央揃えされたいくつかのアイコン

  • コンテナの右側に垂直方向に中央揃えされたいくつかのアイコン

私のテストコード:

.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
vertical-align:middle;
margin:auto;
}

.text {
display:inline-block;
font-size:18px;
text-align:center;
}

.iconsleft, .iconsright {
display:inline-block;
}

.iconsright {
right:0;
}

<div class="container">
    <div class="iconsleft">
        <img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
        <img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
    </div>
    <div class="text">centered text</div>
    <div class="iconsright">
        <img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
        <img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
    </div>
</div>

(このテストでは、Google からランダムなアイコンを取得しました)

これは私のテストコードがどのように見えるか、そしてそれがどのように見えるべきかです:

http://imgur.com/0QfcQnF

コードペン

4

6 に答える 6

2

デモ

アイコンを片側に移動させたい場合はfloat、その方向に移動するように指示する必要があります。

テキストは必要なだけのスペースしか占有しないため、中央揃えにはなりません。幅を明示的に設定すると、より多くのスペースを占有するように指示され、テキストを中央に配置できます。これは、ピクセルまたはパーセンテージで指定できます。たとえば、幅 A のコンテナーと幅 B の 4 つの画像 (それぞれ) がある場合、幅をA - 4Bピクセルに設定できます。

.text {
  display:inline-block;
  font-size:18px;
  text-align:center;
  width: 80%;
}

.iconsleft, .iconsright {
  display:block;
}

.iconsright {
  float: right;
}
.iconsleft {
  float: left;
}
于 2013-08-03T23:27:50.523 に答える
0

text-align: centerがある場合は、中央のブロックではなく、親ブロックに設定する必要がありますdisplay: inline-block。

またvertical-align:middle;、テーブル セル (またはそのようなスタイルの div) にいない限り、何の役にも立ちません。IE7+ で「実際の」垂直方向の中央揃えが必要な場合は、古き良きテーブルを使用しvertical-align: middleます。または、マージンでそれを偽造します。

.iconsleftおよび使用のため.iconsrightに、フロートを試してみたい場合がありますposition: absolute。

CSS:

.container {
  width: 700px;
  height: 70px;
  border: 1px solid;
  background-color: #ddd;
  margin:auto;  
  text-align:center;
}

.text {
  font-size:18px;
  margin-top: 22px;
}

.iconsleft, .iconsright {
  margin: 20px 10px 0;
}

.iconsleft {
  float: left;
}

.iconsright {
  float: right;
}

HTML (フロートはコンテンツの前に記述する必要があります):

<div class="container">
  <div class="iconsleft">
    <img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
    <img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
  </div>
    <div class="iconsright">
    <img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
    <img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
  </div>
  <div class="text">centered text</div>
</div>
于 2013-08-03T23:24:46.323 に答える
0

これが完璧な方法ではないことはわかっていますが、このハックが役立つと思います。

.text {   
    display:inline-block;   
    font-size:18px;   
    text-align:center;  
    width: 80%;   
}  

.iconsleft, .iconsright, .text {   
    display:inline-block;   
    margin-top:20px;  
}   

.iconsright {  
    float: right;  
}   

.iconsleft {   
    float: left;  
}
于 2013-08-04T00:36:26.657 に答える
0

垂直方向と水平方向に整列したデモ。

シンプルなグリッド システムを使用して、すべてを整列させました - CSS:

.grid {
    width:200px;
    height:70px;
    float:left;
}

HTML:

<div class="grid">
    <img src="http://placehold.it/16x16">
    <img src="http://placehold.it/16x16">
</div>

<div class="grid text">centered text</div>

<div class="grid">
    <img src="http://placehold.it/16x16">
    <img src="http://placehold.it/16x16">
</div>
于 2013-08-03T23:49:47.850 に答える
0

HTML 構造の 2 つの side を左右にフロートさせ<div>、right<div>を centered の前に置くだけです。<div>

デモはこちら

<style>
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
vertical-align:middle;
margin:auto;
}

.text {
font-size:18px;
text-align:center;
}

.iconsleft {float: left;}
.iconsright {float: right;}
</style>

<div class="container">
    <div class="iconsleft">
        <img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
        <img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
    </div>
<div class="iconsright">
        <img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
        <img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
    </div>
    <div class="text">Centered demo text</div>
</div>

コンテナーの高さを変更し、下部にパディングを与えることで、ボックス全体を垂直方向の中央に配置できます。

ボーナスデモ

これに変更height: 70px;し.containerます：

height: 50px;
padding-top: 20px;
于 2013-08-03T23:30:22.387 に答える