1

I have this site:

http://avocat2.dac-proiect.ro/?page_id=21

As you can see my text is not aligned vertically as it should. I would like to be lower and the same for all resolutions

This is code html:

    <div class="entry-content2">

<div class="gigi">

  <div class="row">
    <div class="col-sm-12  col-md-12  col-lg-12  style=" "="">
       <img src="wp-content/themes/WordPressBootstrap-master/images/LOGOb.png" class="img-responsive center-block" style="min-width:156px;min-height:83px">
    </div>
   </div>
</div>
        <div class="container-fluid aliniere">
<p class="text-center" style="color:white;font-size:17px;padding-left:50px;padding-right:50px;padding-top:20px;padding-bottom:20px;">Am reprezentat şi am acordat consultanţă juridică pentru clienţi persoane fizice române şi străine, instituţii publice, persoane juridice române şi străine în următoarele domenii:</p>
<div class="row sss">
<div class="col-sm-4 col-md-4 col-lg-3 col-lg-offset-2" style="font-size:17px;color:white;">
<p class="text-left">Drept civil<br>
– agricultură, exploatări agricole, prelucrarea şi comercializarea produselor agricole;<br>
– comerţ cu produse alimentare;<br>
– imobiliar;<br>
– distribuţie de carburanţi;<br>
– transporturi;<br>
– asigurări;<br>
– producţie şi comercializare utilaje grele;<br>
– producţie structuri metalice;<br>
– design, fotografie, artă;
</p>
<p></p></div>
<div class="col-sm-4 col-md-4 col-lg-3 col-lg-offset-0" style="font-size:17px;color:white;">
<p class="text-left">Drept administrativ<br>
– producţie automatizări;<br>
– servicii de proiectare;<br>
– comercializare automatizări;<br>
– jocuri de noroc;<br>
– turism, hoteluri şi pensiuni;<br>
– medical;<br>
– construcţii civile şi industriale;<br>
– comercializare utilaje şi autovehicule, service auto;<br>
– producţie software, administrarea site-urilor; </p>
<p></p></div>
<div class="col-sm-4 col-md-4 col-lg-3 col-lg-offset-0" style="font-size:17px;color:white;">
<p class="text-left">
– comerţ;<br>
– bursier, societăţi listate, investitori, fonduri de investiţii;<br>
– asistenţă şi îngrijire copii şi vârstnici;<br>
– exploatări forestiere şi prelucrarea lemnului;<br>
– extracţia şi prelucrarea minereurilor;<br>
– producţia şi comercializarea materialelor de construcţii;<br>
– instituţii publice;<br>
– instituţii religioase.</p>
<p></p></div>
<p></p></div>
</div>
    </div>

Can you please help me solve this problem?

I found this example but we did not implement it and so I called the help of your

http://jsfiddle.net/v5tc0ga3/

Thanks in advance!

Gigel
  • 11
  • 2

2 Answers2

0

You can use display:table; on your parent container and display:table-cell to the children elements that needs to be vertically aligned.

Also display:table; is very well supported cross-browser:

http://caniuse.com/#feat=css-table

body,html{
    height:100%;
}

div {
  width: 250px;
  height:100%;
  display: table;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom:5px;
}
span {
  display: table-cell;
  vertical-align: middle;
  line-height: normal;
}

JSFIDDLE http://jsfiddle.net/a_incarnati/v5tc0ga3/83/

Alessandro Incarnati
  • 7,018
  • 3
  • 38
  • 54
  • yes I understand your example but fail to implement it for me ... off – Gigel Apr 08 '15 at 17:35
  • I saw the code on the site you posted, it's full of fixed set margin / paddings. Remove those and apply parent container as display:table and children as display:table-cell and vertical-align: middle. Give to body and html tags 100% height and then apply height in percentage to your divs. – Alessandro Incarnati Apr 08 '15 at 17:38
  • where should I remove padding and margin? which is the id class? display: table element must apply .entry-content2? display: table-cell and vertical-align: middle should apply to .row sss – Gigel Apr 08 '15 at 17:45
  • @media screen and (min-width: 1200px) .sss { padding-right: 100px; padding-bottom: 20px; } for example.... remove those :) – Alessandro Incarnati Apr 08 '15 at 17:48
  • It will never be centered if you add fixed right padding :) – Alessandro Incarnati Apr 08 '15 at 17:49
  • I did not know ... are a beginner and are here to learn as many things. It's good to apply your style classes that I said? – Gigel Apr 08 '15 at 17:51
  • No worries, there is time to learn. Just practice by starting a small jsfiddle like the one i posted and then replicate it into your website. :) Good luck – Alessandro Incarnati Apr 08 '15 at 17:58
  • What seems simple in examples ... look how it looks on my site http://i62.tinypic.com/v2z5ae.jpg – Gigel Apr 08 '15 at 18:08
  • Of course it can be tricky, it requires a bit of patience at the beginning. Just get rid of all the CSS code for that page and restart from scratch, so you will have time to think why certain properties are needed or not. – Alessandro Incarnati Apr 08 '15 at 18:09
  • Yes No I do not understand well ... I did exactly as in your example :( – Gigel Apr 08 '15 at 18:17
  • Take the example as approach and then adapt it to your needs. You cannot pretend that on stackoverflow users will finish your website. :) Try, experiment, do more, google, and as i said remove all the existent css first and restart from scratch! :) – Alessandro Incarnati Apr 08 '15 at 18:19
0

In CSS we have something different when handling with tables, where it have the property vertical-align. if you can change the elements display, you can make it to behavior like a table cell, where it can be vertically aligned.

Here, check this link: https://css-tricks.com/centering-in-the-unknown/

.something-semantic {
  display: table;
  width: 100%;
}
.something-else-semantic {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

this will always center vertically your text.

Giovanni Perillo
  • 49
  • 5