2

固定/指定された高さを持たない DIV で画像を垂直方向に中央揃えしようとしています。CSS Tricks に関する不明な記事で Centering を構築しようとしましたが、それを機能させるには、高さを指定する必要があります。むしろ記事のタイトルを欺く。

ここに私の JS フィドルがあります: http://jsfiddle.net/6J2WA/

これは私が望むものです (写真): http://cl.ly/image/1k0h262c2c3s

CSS

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
   height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
}


.inner {
max-width: 960px;
margin: 0 auto;
overflow: hidden;
    background: #ef4;
}

.c-3 {  
width: 29.3%;
float: left;
margin-left: 6%;
    background: #e4f;
}

#you-and-us .c-3 { width: 33.5%; }
#you-and-us .c-3:first-child { text-align: right; margin: 0; }
#you-and-us .c-3:nth-child(2) { width: 21%; text-align: center; position: relative; }
4

1 に答える 1

3

疑似要素手法を使用できない理由は、#you-and-us要素の高さの 100% である祖先要素が十分にないためです。

フロートを捨てて要素に使用すると、全体を簡素化できdisplay: table-cellます.c-3。

http://jsfiddle.net/6J2WA/5/

/* This parent can be any width and height */
.block {
    text-align: center;
}

.inner {
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
    background: #ef4;
}

.c-3 {  
    display: table-cell;
    background: #e4f;
}

#you-and-us .c-3 { width: 33.5%; }
#you-and-us .c-3:first-child { text-align: right; }
#you-and-us .c-3:nth-child(2) { width: 21%; text-align: center; position: relative; background: yellow; vertical-align: middle; }
于 2013-03-13T17:44:46.840 に答える