1

I have a text inside a col, and i would like to know how can i put this text in the middle of the col.

<div class="container-fluid">
  <div class="row">
        <div class="col-xs-2 "><img src="images/header/picture.png" alt="Menu"></div>
        <div class="col-xs-7 ">Perfile</div>
        <div class="col-xs-3"><img src="images/header/picture.png" alt="Menu"></div>
  </div>

kaskull
  • 35
  • 1
  • 5
  • Possible duplicate: http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 – AndreFeijo Jun 03 '16 at 07:33
  • No is not that what i'm serching. This is what i got, and the red line is where should the text be: http://s33.postimg.org/lmf4rxba7/Sin_t_tulo.png – kaskull Jun 03 '16 at 07:48

3 Answers3

0

try this.

  1. In the class row add style="text-align: center"
  2. Then change class="col-xs-2", class="col-xs-7",class="col-xs-3" to class="col-xs-12"
Perfile
rjay dadula
  • 590
  • 4
  • 3
0

Bootstrap. How to align vertically the contents of the menu

I have four solutions. The first of these requires that images were the same height. In three others the images may differ in height.

1. line-height

You can set a property line-height for the text. line-height must be equal to the height of images. It is suitable when the text occupies one line and images have the same height.

.put-in-the-middle {
  line-height: 80px; /* = height of the picture.png */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="pull-left"><img src="http://placehold.it/80x80/69c/fff/" alt="Menu"></div>
    <div class="pull-right"><img src="http://placehold.it/120x80/9c6/fff/" alt="Menu"></div>
    <div class="put-in-the-middle text-center">Perfile</div>
  </div>
</div>

2. table-cell

You can transform blocks in table cells. Then apply vertical-align: middle; to them.

.transform-in-a-table {
  display: table;
}
.transform-in-a-table div {
  display: table-cell !important;
  vertical-align: middle;
}
.make-it-wide {
  width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row transform-in-a-table">
    <div><img src="http://placehold.it/80x40/c69/fff/" alt="Menu"></div>
    <div class="make-it-wide text-center">Perfile</div>
    <div><img src="http://placehold.it/120x80/9c6/fff/" alt="Menu"></div>
  </div>
</div>

3. HTML table

.make-it-wide {
  width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<table>
  <tr>
    <td><img src="http://placehold.it/80x40/c69/fff/" alt="Menu"></td>
    <td class="make-it-wide text-center">Perfile</td>
    <td><img src="http://placehold.it/120x80/9c6/fff/" alt="Menu"></td>
  </tr>
</table>

4. inline-block + text-align-last

You can use the idea from vertical-align with Bootstrap 3 with property text-align-last.

.vertical-middle {
  text-align-last: justify;
}
.vertical-middle > div,
.vertical-middle > img {
  display: inline-block;
  vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row vertical-middle">
    <img src="http://placehold.it/80x40/c69/fff/" alt="Menu">
    <div>Perfile</div>
    <img src="http://placehold.it/120x80/9c6/fff/" alt="Menu">
  </div>
</div>
Community
  • 1
  • 1
Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68
  • Is not a bad idea but... with code you are making my row bigger, i would like that the text get in the middle of the col, regardless of the size of the col ( i don't know if that is possible) – kaskull Jun 03 '16 at 08:27
  • @kaskull In that case you can transform your blocks in table-cells. I've wrote secont solution in my answer. – Gleb Kemarsky Jun 03 '16 at 08:39
  • Thanks Gleb!! That is what i was serching for! But now i got a little problem with your code. (I'm editing and adding the info, for some reason this message sended with out my permit :) ) – kaskull Jun 03 '16 at 08:44
  • Thanks Gleb!! That is what i was serching for! But now i got a little problem with your code. At the end of the menu it apears a white box after adding your code: http://s33.postimg.org/5w5g9j6jj/menu.png And this is the code: http://s33.postimg.org/bb2qhoj4v/Captura.png PD: if i delete logo_center style, the white box still appear! – kaskull Jun 03 '16 at 08:57
  • @kaskull I think, your right column is wider than the image. How about tu change the layout to the HTML-table? I've added this variant to my answer. – Gleb Kemarsky Jun 03 '16 at 11:38
  • @kaskull I've revised and redesigned my answer. Now I have 4 different solutions. I hope one of them will help you. Please let me know how things were going. – Gleb Kemarsky Jun 03 '16 at 13:55
0

You can use bootstrap class text-center to center your element in the column

<div class="container-fluid">
  <div class="row">
        <div class="col-xs-2 "><img src="images/header/picture.png" alt="Menu"></div>
        <div class="col-xs-7 text-center">Perfile</div>
        <div class="col-xs-3"><img src="images/header/picture.png" alt="Menu"></div>
  </div>
Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400