浮动元素中心未知

Question

我正致力于创建模块化图块，这些图块需要在图块右侧垂直居中的文本。

我似乎无法让居中的图形表现出来。这就是我到目前为止......

HTML

<div class="row">
<!--Tile 1-->
<div class="four columns">
    <div class="tile round-border">
        <div class="row container clearfix">
            <div class="nine columns">
                <h2>Headline</h2>
                <p class="body-copy">Body Text</p>
                <a href="#">Action</a>
            </div>
            <div class="three columns absolute-center">
                <div>IMAGE</div>
            </div>
        </div>
    </div>
</div>
</div>

CSS

.absolute-center{
    display: inline-block!important;
    text-align: center;
}

.absolute-center>div{
    display: table-cell;
    vertical-align: middle;
}

Answer 1

您必须确保两列的高度相同。 如果您不使用列，则会更容易，因为您无法在浮动元素上执行此操作。

问题在于您无法确定容器的高度。这在CSS中并不容易。

这是一种方法

＆＃13;

＆＃13;

.tile {
    padding: 20px;
    border: 1px solid #888;
    border-radius: 10px;
    position: relative;
}

.tile__content {
    margin-right: 45px; /* width of your image */
}

.tile__image {
    position: absolute;
    right: 20px;
    top: 20px;
    bottom: 20px;
}

.tile__image img, .strut {
    display: inline-block;
    vertical-align: middle;
}

.strut {
    height: 100%;
}

＆＃13;

<div class="tile round-border">
    <div class="tile__content">
        <h1>Test</h1>
        More height !<br />
        Pliz !
    </div>
    <div class="tile__image">
        <div class="strut"></div><!--
        --><img src="https://cdn4.iconfinder.com/data/icons/CornerStone/PNG/download%20off.png" alt="" />
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

完全宽度和高度适应性。

Answer 2

刚添加位置：绝对和顶部：44％在课堂上：。三看演示：demo

＆＃13;

＆＃13;

/*
*
* Global
*
*/
* {
    margin:0;
    padding:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}

ul li{
    list-style:none;
}

ol li{
    margin-left: 1.3em;
}

body {
    margin:0;
    font-family:Helvetica,Arial,sans-serif;
    font-size:12px;
    color:#333;
    background-color:#fff
}

sup, sub {
   vertical-align: baseline;
   position: relative;
   top: -0.4em;
}
sub { top: 0.4em; }

.pull-right {
    float:right!important
}

.pull-left {
    float:left!important
}

.hide {
    display:none!important
}

.show {
    display:block!important
}

.invisible {
    visibility:hidden
}

hr {
    margin-top:10px;
    margin-bottom:10px;
    border:0;
    border-top:1px solid #ccc
}

.afix {
    position:fixed
}

a {
    color:#069;
    text-decoration:none
}

a:hover {
    text-decoration:underline
}

.clearfix {
    overflow:hidden
}

.center-text {
    text-align:center
}

.text-replace {
    text-indent:100%;
    display:block;
    white-space:nowrap;
    overflow:hidden
}

.absolute-center{
    display: inline-block!important;
    text-align: center;
}

.absolute-center>div{
    display: table-cell;
    vertical-align: middle;
}

/*
*
* Foundation
*
*/
#wrapper {
    width:978px;
    margin:20px auto;
    position:relative
}

.container {
    padding:20px
}

.section {
    margin-bottom:20px
}

.shadow {
    box-shadow:0 0 10px rgba(0,0,0,0.3);
    -moz-box-shadow:0 0 10px rgba(0,0,0,0.3);
    -webkit-box-shadow:0 0 10px rgba(0,0,0,0.3)
}

.hero-space {
    display:table;
    width:100%;
    height:350px
}

.bottom-border,.hero-space {
    border-bottom:solid 1px #ccc
}

.top-border {
    border-top:solid 1px #ccc
}

.round-border,.shadow {
    border:1px solid #CCC;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px
}

.round {
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px
}

/*
*
* Sticky-Bar
*
*/
.sticky-bar {
    width:100%;
    background:#fff;
    z-index:99
}

/*
*
* 8-Column Grid System
*
*/
.column,.columns {
    float:left;
    display:inline;
    margin:0
}

.one {
    width:8.333%
}

.two {
    width:16.66%
}

.three {
    width:25%;
	position:absolute;
	top:44%;
}

.four {
    width:33.33%
}

.five {
    width:41.66%
}

.six {
    width:50%
}

.seven {
    width:58.33%
}

.eight {
    width:66.66%
}

.nine {
    width:75%
}

.ten {
    width:83.33%
}

.eleven {
    width:91.66%
}

.twelve {
    width:100%
}

.fifths{
    width:20%
}

.gutter .column, .gutter .columns{
    padding:0 10px;
    
}

.column-row:after,.row:after,.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden
}

* html .column-row,* html .row,* html .clearfix {
    height:1%
}
/****change*****/
.column-row,.row,.clearfix {
    display:inline-block;
	
}
/***change*****/
.column-row,.row,.clearfix {
    display:block
}

/*
*
* Backgrounds
*
*/
.gradient-down {
    background:#f4f4f4;
/* Old browsers */
    background:-moz-linear-gradient(top,#f4f4f4 0%,#fff 100%);
/* FF3.6+ */
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f4f4f4),color-stop(100%,#fff));
/* Chrome,Safari4+ */
    background:-webkit-linear-gradient(top,#f4f4f4 0%,#fff 100%);
/* Chrome10+,Safari5.1+ */
    background:-o-linear-gradient(top,#f4f4f4 0%,#fff 100%);
/* Opera 11.10+ */
    background:-ms-linear-gradient(top,#f4f4f4 0%,#fff 100%);
/* IE10+ */
    background:linear-gradient(to bottom,#f4f4f4 0%,#fff 100%);
/* W3C */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4',endColorstr='#ffffff',GradientType=0)
/* IE6-9 */
}

.gradient-up {
    background:#f4f4f4;
/* Old browsers */
    background:-moz-linear-gradient(top,#fff 0%,#f4f4f4 100%);
/* FF3.6+ */
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#f4f4f4));
/* Chrome,Safari4+ */
    background:-webkit-linear-gradient(top,#fff 0%,#f4f4f4 100%);
/* Chrome10+,Safari5.1+ */
    background:-o-linear-gradient(top,#fff 0%,#f4f4f4 100%);
/* Opera 11.10+ */
    background:-ms-linear-gradient(top,#fff 0%,#f4f4f4 100%);
/* IE10+ */
    background:linear-gradient(to bottom,#fff 0%,#f4f4f4 100%);
/* W3C */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff',endColorstr='#f4f4f4',GradientType=0)
/* IE6-9 */
}

.gradient-diagonal {
    background:#fff;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y0ZjRmNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background:-moz-linear-gradient(-45deg,#fff 0%,#f4f4f4 100%);
/* FF3.6+ */
    background:-webkit-gradient(linear,left top,right bottom,color-stop(0%,#fff),color-stop(100%,#f4f4f4));
/* Chrome,Safari4+ */
    background:-webkit-linear-gradient(-45deg,#fff 0%,#f4f4f4 100%);
/* Chrome10+,Safari5.1+ */
    background:-o-linear-gradient(-45deg,#fff 0%,#f4f4f4 100%);
/* Opera 11.10+ */
    background:-ms-linear-gradient(-45deg,#fff 0%,#f4f4f4 100%);
/* IE10+ */
    background:linear-gradient(135deg,#fff 0%,#f4f4f4 100%);
/* W3C */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#f4f4f4',GradientType=1)
/* IE6-8 fallback on horizontal gradient */
}

.solid-blue {
    background:#067ab4
}

.solid-blue,.solid-blue a,.solid-black,.solid-black a {
    color:#fff
}

.solid-black {
    background:#333
}

.solid-grey {
    background:#f4f4f4
}

/*
*
* Browser Error
*
*/
.browsererror {
    background:#fffde8;
    width:100%
}

.browsererror h2 {
    margin-bottom:5px
}

.browsererror ul li {
    display:inline-block;
    padding-left:20px;
    margin-top:10px;
    margin-right:15px;
    line-height:18px;
    vertical-align:middle;
    background:url(../images/error-sprite.png) no-repeat top left
}

.browsererror ul li a {
    display:inline-block;
    padding-right:17px;
    vertical-align:middle;
    background:url(../images/error-sprite.png) no-repeat right -76px
}

.close a {
    background:#e9e7d0;
    padding:15px;
    display:table-cell;
    vertical-align:middle;
    height:81px
}

.close a:hover {
    background:#e3e1cb
}

.close a span {
    width:19px;
    height:19px;
    text-indent:100%;
    display:block;
    white-space:nowrap;
    overflow:hidden;
    background:url(../images/error-sprite.png) no-repeat left bottom
}

/*
*
* Typography
*
*/
h1 {
    font-weight:100;
    font-size:32px;
    margin-bottom:.5em
}

h2 {
    font-weight:300;
    font-size:20px;
    margin-bottom:.5em
}

h3 {
    font-weight:900;
    text-transform:uppercase;
    font-size:12px;
    margin-bottom:.5em;
    color:#999
}

.body-copy {
    line-height:1.4em;
    margin-bottom:.7em
}

.sub-heading {
    font-size:15px;
    color:#666;
    margin-bottom:.5em
}

.block-quote {
    border-left:3px solid #ccc;
    padding-left:10px;
    margin-left:10px
}

.price{
    color:#ff7200;
    font-size: 30px;
    font-weight: 100;
    margin-bottom: .05em;
}

.legal{
    font-size: 10px;
    color:#666;
}
/*
*
* Forms
*
*/
.form-title {
    font-weight:900;
    margin:0 10px 10px 0
}

input[type=radio],input[type=checkbox] {
    display:none
}

input[type=radio]:checked + label,input[type=checkbox]:checked + label {
    background-position:bottom left;
    color:#333
}

.form label {
    color:#999;
    padding-left:20px;
    height:15px;
    display:block;
    line-height:17px;
    background-repeat:no-repeat;
    background-position:0 0;
    font-size:12px;
    vertical-align:middle;
    cursor:pointer;
}

.form li{
    margin-bottom:10px

}

.radio + label {
    background-image:url(../images/sprite-radio.png);
    background-repeat: no-repeat;

}

.checkbox + label {
    background-image:url(../images/sprite-check.png);
    background-repeat: no-repeat;


}

.form label:hover {
    color:#333
}

.form-hrz li {
    display:inline-block;
    margin-right:5px
}

/*
*
* Buttons
*
*/
.btn {
    font-family:helvetica,arial,sans-serif;
    color:#069;
    text-decoration:none;
    font-size:12px;
    padding:10px 15px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    border:1px solid #ccc;
    display:inline-block;
    font-weight:200
}

/*Size*/
.btn-lg {
    font-size:20px;
    padding:15px 20px
}

.btn-md {
    font-size:15px;
    padding:10px 15px
}

.btn-sm {
    font-size:12px;
    padding:10px 15px
}

.btn-xsm {
    font-size:11px;
    padding:5px 10px
}

/*Color*/
.btn-primary {
    background:#067ab4;
    background-image:linear-gradient(to bottom,#5EACD4 0%,#067ab4 100%);
    background-image:-webkit-linear-gradient(top,#5EACD4 0%,#067ab4 100%);
    background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#5EACD4),color-stop(1,#067ab4));
    background-image:-o-linear-gradient(top,#5EACD4 0%,#067ab4 100%);
    background-image:-moz-linear-gradient(top,#5EACD4 0%,#067ab4 100%);
    background-image:-ms-linear-gradient(top,#5EACD4 0%,#067ab4 100%);
    border-color:#067ab4;
    color:#fff;
    text-shadow:0 1px rgba(0,0,0,0.5)
}

.btn-primary:hover {
    background:#067ab4;
    color:#fff;
    cursor:pointer
}

.btn-primary:active {
    background:#0986b8;
    color:#fff
}

.btn-default {
    background:#fff;
    background-image:linear-gradient(to bottom,#fff 0%,#f4f4f4 100%);
    background-image:-webkit-linear-gradient(top,#fff 0%,#f4f4f4 100%);
    background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(1,#f4f4f4));
    background-image:-o-linear-gradient(top,#fff 0%,#f4f4f4 100%);
    background-image:-moz-linear-gradient(top,#fff 0%,#f4f4f4 100%);
    background-image:-ms-linear-gradient(top,#fff 0%,#f4f4f4 100%);
    border-color:#ccc;
    color:#069
}

.btn-default:hover {
    background:#f4f4f4;
    cursor:pointer
}

.btn-default:active {
    background:#eee
}

.btn-disabled {
    background:#f4f4f4;
    border-color:#ccc;
    color:#999
}

.btn-disabled:hover {
    cursor:default
}

.btn-none {
    background:transparent;
    border:none;
    color:#069
}

.btn-none:hover {
    cursor:pointer;
    text-decoration:underline
}

/*
*
* Tabs
*
*/
.tabs ul li {
    text-align:center
}

.tabs ul li+li {
    border-left:solid 1px #ccc
}

.tabs ul li a {
    padding:15px;
    display:block;
    color:#666;
    background:#f4f4f4;
    border-bottom:1px solid #ccc
}

.tabs ul li a:hover {
    color:#333;
    background:#fff;
    text-decoration:none;
    border-bottom-width:3px;
    padding-bottom:12px
}

.tabs ul .active a {
    color:#067ab4;
    background:#fff;
    border-bottom:3px solid #067ab4;
    padding-bottom:12px
}

.tabs ul .active a:hover {
    color:#067ab4;
    background:#fff;
    border-bottom:3px solid #067ab4;
    padding-bottom:12px;
    cursor:default
}

.tab-content {
    display:none;
}

.tab-stage .active {
    display:block
}

.tabs .icon {
    width:50px;
    height:50px;
    display:block;
    margin:0 auto 10px;
    background:url() no-repeat bottom center
}

.tabs .active .icon {
    background-position:top center
}

/*
*
* Tag Cloud
*
*/
.tag-cloud li {
    float:left;
    margin-right:10px
}

.tag-cloud li a {
    display:block;
    padding:10px;
    background:#067ab4;
    color:#fff;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px
}

.tag-cloud li a:hover {
    text-decoration:none;
    background:#069;
    color:#fff
}

/*
*
* Meters
*
*/
.meter .label li {
    display:inline-block;
    font-size:12px;
    padding:2px 5px 2px 0;
    margin-bottom:5px
}

.meter .label li+li {
    padding-left:10px;
    border-left:1px solid #ccc
}

.meter .bar-container {
    background:#eee;
    border-radius:20px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border:solid 1px #ccc;
    margin-right:10px
}

.meter .bar {
    height:20px;
    border-radius:20px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px
}

.meter-small .bar {
    height:7px
}

/*Green Bar*/
.green .bar {
    background:#6ebb1f
}

.green .status {
    padding-left:0;
    line-height:20px;
    font-size:15px
}

/*Yellow Bar*/
.yellow .bar {
    background:#fc0
}

.yellow .status {
    padding-left:25px;
    background:url(../images/alert-sprite.png) no-repeat left top;
    line-height:20px;
    font-size:15px
}

/*Red Bar*/
.red .bar {
    background:#c00
}

.red .status {
    padding-left:25px;
    background:url(../images/alert-sprite.png) no-repeat left bottom;
    line-height:20px;
    font-size:15px
}

/*Null Bar*/
.null .bar {
    background:#666
}

.null .status {
    line-height:20px;
    font-size:15px
}

/*
*
* Tiles
*
*/
.tile{
    margin: 5px;
    position: relative;
    overflow: hidden;
}

.sales-tile{
    height: 246px;
}

.tile .tag{
    width: 65px;
    height: 65px;
    z-index:2;
    right:-3px;
    top:-3px;
    position: absolute;
    background-image: url(../images/tag-sprite.png);
    background-repeat: no-repeat;
}

.tile .collapse{
    overflow: hidden;
}

.compare{
    background:#e6f1f7;
    border-color:#067ab4;
}


.fourGLTE-tag{background-position:0 0;}
.fourG-tag{background-position:0 -65px;}
.webonly-tag{background-position:0 -130px;}
.webprice-tag{background-position:0 -195px;}


/*
*
* Stars
*
*/
.stars{
    height:10px;
    background-image: url(../images/stars-sprite.png);
    background-repeat:  no-repeat;
    background-position: center top;
}

.no-star{background-position: 50% -100px;}
.half-star{background-position: 50% -90px;}
.one-star{background-position: 50% -80px;}
.one-half-star{background-position: 50% -70px;}
.two-star{background-position: 50% -60px;}
.two-half-star{background-position: 50% -50px;}
.three-star{background-position: 50% -40px;}
.three-half-star{background-position: 50% -30px;}
.four-star{background-position: 50% -20px;}
.four-half-star{background-position: 50% -10px;}
.five-star{background-position: 50% 0;}


/*
*
* Notes
*
*/

.reminder{background: #ffffcc; border-color: #cccc99;}
.success{background: #e4f7da; border-color: #6ebb1f; color: #529442;}
.alert{background: #fae5e5; border-color: #cc0000; color: #cc0000;}
.well{background: #f4f4f4; border-color: #ccc;}

＆＃13;

<div class="row">
<!--Tile 1-->
<div class="four columns">
    <div class="tile round-border">
        <div class="row container clearfix">
            <div class="nine columns">
                <h2>Headline</h2>
                <p class="body-copy">Body text will display here.</p>
                <a href="#">Action</a>
            </div>
            <div class="three columns absolute-center">
                <div>Image</div>
            </div>
        </div>
    </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以定义该div的高度：

.absolute-center>div{
    display: table-cell;
    vertical-align: middle;
    height: 100px;
}

demo

Answer 4

我能够通过向父级添加表类来实现它。

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}
body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #333;
  background-color: #fff
}
hr {
  margin-top: 10px;
  margin-bottom: 10px;
  border: 0;
  border-top: 1px solid #ccc
}
a {
  color: #069;
  text-decoration: none
}
a:hover {
  text-decoration: underline
}
.clearfix {
  overflow: hidden
}
.absolute-center {
  text-align: center;
  vertical-align: middle;
}
.table {
  display: table!important;
}
.table > div {
  display: table-cell;
  float: none;
}
.container {
  padding: 20px
}
.round-border {
  border: 1px solid #CCC;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px
}
.columns {
  float: left;
  display: inline;
  margin: 0
}
.three {
  width: 25%
}
.four {
  width: 33.33%
}
.nine {
  width: 75%
}
.row:after,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden
}
* html .row,
* html .clearfix {
  height: 1%
}
.row,
.clearfix {
  display: inline-block
}
.row,
.clearfix {
  display: block
}
h2 {
  font-weight: 300;
  font-size: 20px;
  margin-bottom: .5em
}
.body-copy {
  line-height: 1.4em;
  margin-bottom: .7em
}
.tile {
  margin: 5px;
  position: relative;
  overflow: hidden;
}

＆＃13;

<div class="four columns">
  <div class="tile round-border">
    <div class="row container clearfix table">
      <div class="nine columns">
        <h2>Headline</h2>
        <p class="body-copy">Body Text</p>
        <a href="#">Action</a>
      </div>
      <div class="three columns absolute-center">
        <div>IMAGE</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;