Vertical text alignment [duplicate]

Navigation
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;
}
    
asked by anonymous 24.11.2017 / 22:26

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>
    
24.11.2017 / 22:57
Regex can not find all the required expressions Memory access error!