Alignment of vertical text

Asked

Viewed 1,285 times

2

hello, I’m trying to align a text vertically, but the code is not working.

It is divided into 2 columns and the column with the image is larger the text is at the top

html:

<div class="col-md-12" id="id01">
          <h3>Id01</h3>
          <div class="row">
            <div class="col-md-6 texto">
              <p>
                Texto alinha verticalmente
              </p>
            </div>
            <div class="col-md-6">
              <h4>texto h4</h4>
              <img src="img/foto.jpeg" class="img-responsive img-circle">
            </div>
          </div>
        </div>

css:

#id01 {
  display: table;
}
#id01 .texto p {
  display: table-cell;
  vertical-align: middle;
}
html css
  • 1

    Mix boostrap GRID with display:table will not work anyway, it will give only problem, because you are breaking the behavior of GRID

  • I understand, but is there a way to align vertically without losing responsiveness and not getting misaligned.

  • Test this https://answall.com/a/57023/3635, note that he did not put the Transform in the col, but in the child element, the elements <p>. You can create a sub-div and add the Transform to it.

  • I’ll take a look, vlw..

1 answer

0

You can use transform without touching the Bootstrap grid:

#id01 .texto p {
   -webkit-transform:translate(0,-50%);
   transform:translate(0,-50%);
   top:50%;
   position: relative;
}


#id01 .texto p {
   -webkit-transform:translate(0,-50%);
   transform:translate(0,-50%);
   top:50%;
   position: relative;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<div class="col-md-12" id="id01">
   <h3>Id01</h3>
   <div class="row">
      <div class="col-md-6 texto align-text-bottom">
         <p>
            Texto alinha verticalmente
         </p>
      </div>
      <div class="col-md-6">
         <h4>texto h4</h4>
         <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" class="img-responsive img-circle">
      </div>
   </div>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.