Question

我正在使用Bootstrap显示随机推文和静态图像。

它看起来很棒，但文字始终垂直于顶部，而不是图像的中心。

如何解决这个问题，无论推文的长度如何，都会在中间垂直显示？

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    background:black;
    margin: 10px;
    color:white
}

      img {
        float:left
      }

/*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

      img {
        float:none
      }

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
        
    }

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
		<div class="container">
			
			<div class="row">
				
				<div class="col-md-6 text-center col-md-push-3">

					<div class="tweet">

	<!--<i class="fa fa-twitter fa-5" aria-hidden="true" style="font-size: 4em;color:white"></i>-->
  <img src="http://placehold.it/100x100">
	
	<blockquote>
		<p>
			RT  <a href="http://twitter.com/thetomzone">@thetomzone</a> : Seriously, drop everything you're...
		</p>
	</blockquote>
	
</div>				 
				</div>
			
			</div>

Answer 1

给

img, blockquote {
  float: none;
  display: inline-block;
}

<强> JSFIDDLE

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  background: black;
  margin: 10px;
  color: white
}

img,
blockquote {
  float: none;
  display: inline-block;
}


/*==========  Non-Mobile First Method  ==========*/


/* Large Devices, Wide Screens */

@media only screen and (max-width: 1200px) {}


/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {}


/* Small Devices, Tablets */

@media only screen and (max-width: 768px) {
  img {
    float: none
  }
}


/* Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {}


/* Custom, iPhone Retina */

@media only screen and (max-width: 320px) {}

.tweet:after {
  clear: both;
  display: table;
  content: '';
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

  <div class="row">

    <div class="col-md-6 text-center col-md-push-3">

      <div class="tweet">

        <!--<i class="fa fa-twitter fa-5" aria-hidden="true" style="font-size: 4em;color:white"></i>-->
        <img src="http://placehold.it/100x100">

        <blockquote>
          <p>
            RT <a href="http://twitter.com/thetomzone">@thetomzone</a> : Seriously, drop everything you're...
          </p>
        </blockquote>

      </div>
    </div>

  </div>

Answer 2

我想说最简单的方法是设置一些这样的CSS：

.tweet {
  display: table;
  width: 100%;
}

.tweet blockquote {
  display: table-cell;
  vertical-align: middle;
}

如果浏览器支持足够，您可以使用display: flex;：http://caniuse.com/#search=flex

演示：https://jsfiddle.net/9wwuznpL/4/

Answer 3

您需要将元素，图像和区块引用的默认显示更改为内联块。然后，您可以使用 vertical-align css属性并将其值设置为中间。您应该为blockquote元素设置宽度或最大宽度，因为如果您不这样做，则blockquote可以将自己置于图像下方。

我修改了你的小提琴：https://jsfiddle.net/9wwuznpL/1/

  img {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
  }

  blockquote {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 110px);
    margin-bottom: 0;
    text-align: left;
  }

如您所见，您可以使用calc作为报价宽度值，例如：如果图像宽度为100px，则报价必须为calc（100％ - 110px）。您必须知道内联块元素可用作排版，因此空白空间将起作用。所以你应该添加大约4个额外的像素。在我的例子中，我添加了10个像素，但只有4个这应该可以正常工作。

Answer 4

您可以通过几种不同的方式实现效果：Flexbox，带转换的绝对定位，以及带display: table的{{1}} / table-cell。由于其他答案已涵盖其他类型，因此这里是Flexbox版本：

＆＃13;

vertical-align

＆＃13;

.tweet {
  border: 1px solid black;
  /* Use .tweet as flexbox container */
  display: flex;
  /* Align all items in the middle of said container */
  align-items: center;
}

  .tweet__avatar, .tweet__body {
    border: 1px dotted red;
  }

  .tweet__body {
    margin: 0;
    /* This instructs the browser to stretch .tweet__body all the way to the end.
       Otherwise it would stop at the end of the content. */
    flex-grow: 1;
  }

＆＃13;

将文本垂直对齐图像

4 个答案: