I can not in any way squeeze the menu item to the right relative to the parent while maintaining centering vertically

Question

Good day! Faced a problem with which I have been fighting for several days and I can’t solve it in any way. There is a rubber height menu. Task: press the menu item "Download price" to the right menu. Of the obligatory conditions, this is the vertical centering of the contents of all menu items, wherever they are, on the left or on the right (our “Download price list”. As soon as I have not done both through the floats and through the abs. Positioning. to achieve the goal, but there were also shoals. When you substitute the values of top: 50%; right: 0 for the menu item that you need to press, the point was not centered on the height quite vertically. this value is top: 50% oriented. position: relative height avil parent #menu In general, such a trouble Please help us to end this already in advance :) kowtow code attached..!: enter image description here

#menu_background { background: #0060c1; } #menu { width: 1100px; margin: 0 auto; position: relative; } #menu_left { display: table-cell; vertical-align: middle; } #menu_left_content { list-style: none; padding: 10px 0; } #menu_left_content li { display: table-cell; font-size: 1.2em; vertical-align: middle; text-align: center; padding: 0 10px; color: #fff; border-right: 1px solid #fff; } #menu_left_content li:hover { } #menu_left_content li.menu_left_content_li_last { border-right: none; } #menu_left_content li.menu_left_content_li_elem { border-right: none; position: absolute; right: 0; padding: 0; margin: 0; } #menu_right { display: table-cell; vertical-align: middle; } #menu_right_content { } #menu_right_content li { list-style: none; } #menu_right_content a { background: #fff; padding: 5px 10px; font-size: 1.2em; text-align: center; border-radius: 25px; color: red; display: block; } #menu_right_content a:hover { transition: all 0.2s; box-shadow: 0px 0px 0px 4px rgba(255,255,255,1); } #menu_right_content img { width: 25px; vertical-align: middle; margin-right: 10px; }

 <div id="menu_background"> <div id="menu"> <div id="menu_left"> <ul id="menu_left_content" > <li>Водоотливы<br/>Подоконники</li> <li>Инструмент</li> <li class="menu_left_content_li_last">Строительная<br/>химия</li> </ul> </div> <div id="menu_right"> <div id="menu_right_content"> <li><a href="" ><img src="images/pdf.png"/>Скачать прайс</a></li> </div> </div> </div> </div>

Qwertiy ♦ Qwertiy 76.8k 17 golden marks 74 silver marks 203 bronze marks · Accepted Answer · 2015-07-17T11:17:41

 .menu { background: #0060c1; min-width: 600px; max-width: 1100px; margin: 0 auto; overflow: hidden; position: relative; } .menu nav { float: left; } .menu ul { list-style: none; padding: 0; } .menu nav li { display: inline-block; font-size: 1.2em; vertical-align: middle; text-align: left; padding: 0; color: #fff; } .menu nav li:before { content: ""; position: absolute; top: 10px; bottom: 10px; border-right: 1px solid; } .menu nav li:first-child:before { content: none; } .menu nav a { display: block; text-align: center; padding: 0 10px; cursor: pointer; text-decoration: none; } .menu nav a:hover { color: yellow; } .download-pricelist { position: absolute; right: 10px; top: 0; bottom: 0; margin: auto; height: 1em; transition: all 0.2s; background: #fff; padding: 5px 10px; font-size: 1.2em; text-align: center; border-radius: 25px; color: red; display: block; } .download-pricelist:hover { box-shadow: 0px 0px 0px 4px rgba(255,255,255,1); } .download-pricelist img { width: 25px; vertical-align: middle; margin-right: 10px; }

 <div class="menu"> <nav> <ul> <li><a>Водоотливы<br/>Подоконники</a></li> <li><a>Инструмент</a></li> <li><a>Строительная<br/>химия</a></li> </ul> </nav> <a href="#" class="download-pricelist"><img src="images/pdf.png"/>Скачать прайс</a> </div>

Well, it's better to remove the picture from img and put it in the background by adding padding-left.

KYRAN KYRAN 1.877 1 golden mark 10 silver marks 36 bronze marks · Answer 2 · 2015-07-17T11:27:12

Better go

 #menu_background { width: 100%; height: 90px; background: #0060c1; } #menu { width: 1100px; height: 90px; background: #0060c1; margin: 0 auto;} #menu_left { float: left;} #menu_left_content { list-style: none; padding: 10px 0; } #menu_left_content li { display: table-cell; font-size: 1.2em; vertical-align: middle; text-align: center; padding: 0 10px; color: #fff; border-right: 1px solid #fff; } #menu_left_content li:hover { } #menu_left_content li.menu_left_content_li_last { border-right: none; } #menu_left_content li.menu_left_content_li_elem { border-right: none; position: absolute; right: 0; padding: 0; margin: 0; } #menu_right {float: right; padding: 25px;} #menu_right_content { } #menu_right_content li { list-style: none; } #menu_right_content a { background: #fff; padding: 5px 10px; font-size: 1.2em; text-align: center; border-radius: 25px; color: red; display: block; } #menu_right_content a:hover { transition: all 0.2s; box-shadow: 0px 0px 0px 4px rgba(255,255,255,1); } #menu_right_content img { width: 25px; vertical-align: middle; margin-right: 10px; }

 <div id="menu_background"> <div id="menu"> <div id="menu_left"> <ul id="menu_left_content" > <li>Водоотливы<br/>Подоконники</li> <li>Инструмент</li> <li class="menu_left_content_li_last">Строительная<br/>химия</li> </ul> </div> <div id="menu_right"> <div id="menu_right_content"> <li><a href="" ><img src="images/pdf.png"/>Скачать прайс</a></li> </div> </div> </div> </div>

Answer 3 · 2015-07-17T12:51:15

Thank you all so much for your responsiveness!

KYRAN, unfortunately, the option proposed by you did not fit, because it uses a fixed height for the #menu block. But thanks anyway for responding :)

Qwertiy, I do not even know what words to express my gratitude :) Thank you very much! Your option is what you need. I have a little sawed something at my discretion. Despite this, your idea of resolving the issue finally solved my problem. Thanks again!

An example of a modified Qwertiy code:

 #menu_background { background: #0060c1; } #menu { width: 1100px; margin: 0 auto; overflow: hidden; position: relative; } #menu ul { list-style: none; } #menu ul li { display: table-cell; font-size: 1.2em; vertical-align: middle; text-align: left; padding: 10px 0; color: #fff; } #menu ul li:hover { background: red; } #menu ul li:before { content: ""; position: absolute; top: 10px; bottom: 10px; border-right: 1px solid; } #menu ul li:first-child:before { content: none; } #menu ul a { display: block; color: #fff; text-align: center; padding: 0 10px; cursor: pointer; text-decoration: none; } #menu ul a:hover { color: yellow; } .download-pricelist { position: absolute; right: 4px; top: 0; bottom: 0; margin: auto; height: 1.6em; transition: all 0.2s; background: #fff; padding: 5px 10px; font-size: 1.2em; text-align: center; border-radius: 25px; color: red; display: block; } .download-pricelist:hover { color: red; box-shadow: 0px 0px 0px 4px rgba(255,255,255,1); } .download-pricelist img { width: 25px; vertical-align: middle; margin-right: 5px; }

 <div id="menu_background"> <div id="menu"> <ul> <li><a>Водоотливы<br/>Подоконники<br/>Подоконники</a></li> <li><a>Инструмент</a></li> <li><a>Строительная<br/>химия</a></li> </ul> <a href="#" class="download-pricelist"><img src="images/pdf.png"/>Скачать прайс</a> </div> </div>

In the modified example there is one two-three-line menu items, for clarity, I made hover menu li red, played with some other values. Yes, and the important point was that the right border was the height of the largest menu item.

Now it looks like me: enter image description here

Since the answer instead of a comment posted, then put the code in it.
"because it uses a fixed height for the #menu block", and in the question it could not be written so that everything could be done easier and without unnecessary problems ???
I mentioned the fixed height: "There is a rubber-sized menu."

I can not in any way squeeze the menu item to the right relative to the parent while maintaining centering vertically

3 answers 3

More articles: