1

I need to align text to the center in this menu but I could not.

#mimenu a {
    display: inline-block;
    width: 130px;
    height: 50px;
    background-color: #3D2F2F;
    text-align:center;
    color:white;
    margin-top:20px;
    background-color:#3d2f2f;
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    vertical-align:top;
    padding-top:10%;
    margin-right:10px;
}

http://jsfiddle.net/79epfyut/

Matija Mrkaic
  • 1,817
  • 21
  • 29
metalbox
  • 302
  • 4
  • 17

4 Answers4

1

You can make your containing li a display: table element, and the anchor a display: table-cell.

That would allow you to easily set the vertical-align property of the anchor to middle:

Updated Fiddle

Although that changed a bit your visual style, and may require some adjusts...

EDIT

To keep the padding, set it on the container li: Fiddle with padding

LcSalazar
  • 16,524
  • 3
  • 37
  • 69
  • 1
    But now the padding between items is gone. How would you get that back? – j08691 Sep 10 '14 at 20:57
  • The solution is dealing to the specific problem of vertical aligment of the text... It solves *that* issue, and will be useful to someone else looking for the same problem... Although messed up with the style, I disagree with the downvote – LcSalazar Sep 10 '14 at 20:59
  • And the padding may be set in the container `li`: http://jsfiddle.net/79epfyut/7/ – LcSalazar Sep 10 '14 at 21:00
1

Take a look at a different approach i tried.

I am using the following CSS properties:

display: table; /*for main div*/ 

display: table-row; /*for ul */

display: table-cell; /*for li */

To make it much clear: Fiddle here !

Hope this helps.

Giannis Grivas
  • 3,374
  • 1
  • 18
  • 38
0

OK I think this is a much easier solution. I hope you don't mind that I didn't use the same html layout that you did...but it does the same thing.Besides you should only really use unordered lists <ul></ul> for exactly that, and use <div></div> <span></span>, etc for ordering your layouts. Anyway, here's a simpler version of what you want to do: jsfiddle

Updated:

Sorry I'm at work so I was quickly trying to give an answer without taking up too much time to explain it...which likely isn't helpful. Anyway, here's the information on what I did.

Basically you take the outer div and assign it a class of menu. Give the parent div, or the menu in our case, a height and width. Then place each link in it's own div. These will be the children divisions.

The css for the children give them a percentage of the of the parent's width and 100% it's height. Make sure to make the display inline-block so they will be in a line and not stack on top of each other. OK so far I think everything is pretty easy to grasp from the css code, but here's the tricky part:

IN order to get the links to be vertically aligned you'll move them down by 50% of their parent's height...hence top: 50%. Then you need to adjust for their own height. You can do this by using transform: translateY(-50%); which moves the element up by 50% of it's own height. This is a very brief and you can read more from the article I initially read on the subject here: Vertically Center Elements

And here's the code:

html:

<div id="menu">
 <div class="child">
    <a href="/joomla31/">Somos</a>
 </div>
 <div class="child">
    <a href="/joomla31/index.php/segunda-pagina">Segunda Página</a>
 </div>
 <div class="child">
    <a href="#">Este es un texto largo para el menú</a>
 </div>    
</div>

css:

#menu{
width: 100%;
height: 100px; 
display: block;
}
.child{
margin: 1%;
background-color:#3d2f2f; 
width: 30%;
height: 100%;
text-align: center;
display: inline-block;
}
a{
background: #ffdb4c;
position: relative;
top: 50%;
transform: translateY(-50%);
}
BryceHayden
  • 596
  • 1
  • 6
  • 13
  • Please include the relevant code or an explanation of what you did from the jsfiddle into the answer itself so that your answer is still useful when jsfiddle is down – Zach Saucier Sep 10 '14 at 22:01
0

Dont give height and some property in a tag, you can give li only for that values. Please refer:

.miul
{
 font-size:10px;
 list-style:none;
 margin-left:-40px;
}
.miul li a
{
 text-decoration:none;
}

#sect_01
{
 width:100%;
 display:block;
}
/*
#mimenu ul
{
 list-style:none;
}

#mimenu li
{
 display:inline-block;
 color:white;
 font-size:14px;
 margin-right:10px
}

#mimenu  a
{
 color:white;
 text-decoration:none;
 padding: 25px 18px;
 display:block;
 background-color:#3d2f2f;
 -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
 -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
 box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
}
*/
/*Menu */
#mimenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
 
}

#mimenu ul li {
    float: left;
 color:white;
 font-size:14px;
  display:table;
  height: 70px;
  background-color: #3D2F2F;
   margin-right:10px;
 margin-top:20px;
  background-color:#3d2f2f;
 -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
 -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
 box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
}

#mimenu  a {
    display: block;
    display:table-cell;
    vertical-align: middle;
    width: 130px;  
    text-align:center;
    color:white; 
 
 
}

#top_menu a:link {
    text-decoration: none;
 color:white;
}

#top_menu a:visited {
    text-decoration: none;
 color:white;
}

#top_menu a:hover {
    text-decoration: none;
 color:white;
}

#top_menu a:active {
    text-decoration: none;
 color:white;
}
<div style="width:960px;display:block;" id="mimenu">
<ul class="nav menu miul">
<li class="item-101 current active">
<a href="/joomla31/">Somos</a>
</li>
<li class="item-103">
<a href="/joomla31/index.php/segunda-pagina">Segunda Página</a>
</li>
<li class="item-104">
<a href="#">Este es un texto largo para el menú</a>
</li>
</ul>

</div>
Ayyappan K
  • 1,111
  • 8
  • 9