Twitter Bootstrap Question posted in

Align text vertically alongside image – Twitter bootstrap

I am using Bootstrap to display a random tweet and a static image alongside it.

It looks great, but the text is always vertically at the top, instead of center of the image.

How do I resolve this so no matter the length of the tweet, it’ll display in the middle vertically?

Demo: https://jsfiddle.net/9wwuznpL/

/* 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>
Tags:

4

Answers


  1. 0

    Give 

    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>
    Login or Signup to reply.
  2. 0

    I would say the easiest way is to set some css like this:

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

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

    Or you could use display: flex; if the browser support is enough: http://caniuse.com/#search=flex

    Demo: https://jsfiddle.net/9wwuznpL/4/

    Login or Signup to reply.
  3. 0

    You need to change the default display of both elements, image and blockquote, to inline-block. Then you can use vertical-align css property and set its value to middle. You should set a width or max-width to the blockquote element, because if you don’t do this the blockquote could place itself below the image.

    I modified your fiddle: 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;
  }

    As you could see you can use calc for the quote width value, e.g. if the image is 100px wide the quote must be calc(100% – 110px). You must know that inline-block elements work as typography, so an empty space will work as a nbsp; so you should add around 4 extra pixels. In my example I added 10 more pixels, but with only 4 this should work properly.

    Login or Signup to reply.
  4. 0

    You can achieve your effect in a few different ways: Flexbox, absolute positioning with transformations, and display: table/table-cell with vertical-align. Since the other answers have already covered the other types, here’s the Flexbox version:

    .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;
  }
    <div class="tweet">
  <div class="tweet__avatar">
    <img src="http://placehold.it/100x100" alt="">
  </div>
  <blockquote class="tweet__body">
    <p><cite>RT <a href="http://twitter.com/thetomzone">@thetomzone</a></cite> Seriously, drop everything you're...</p>
  </blockquote>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search