Geek Answers Handbook

Center one element and right-aligned another in the same line

I have two boxes. One to the left and one to the right of the page.

On the left side there is a login + registration.

One on the right has two images.

I am trying to align the left in the center of the page whose contents are aligned horizontally, i.e. one line.

I am trying to get the right square on the right side of the page with its contents on one line.

My violin

#topjob { width: 100%; text-align: center; } #left { float: left; width: 500px; height: 50px; background: #ff0000; } #right { width: 100%; display: inline-block; margin-right: auto; margin-left: 100px; width: 100px; height: 50px; background: #00ff00; } #center ul li { float: right; width: 200px; height: 50px; background: #0000ff; } 
 <div class="header_top"> <!--header_top--> <div class="container"> <div class="row"> </div> <div id="topjob"> <div id="left"> <ul> <li><a href="#"><i class=""></i>LOGIN</a> </li> <li><a href="#"><i class=""></i>REGISTER</a> </li> </ul> </div> <div id="right"> <ul> <li> <a href="index.html"> <img src="images/mastercard.png" alt="" /> </a> <li> <a href="index.html"> <img src="images/visa.png" alt="" /> </a> </ul> </div> </div> </div> </div> </div>
+5
source share
2 answers

You can efficiently complete this task with CSS Flexbox .

 #topjob { display: flex; /* make container a flexbox */ justify-content: center; /* center child elements ("flex items") */ position: relative; /* establish nearest positioned ancestor for absolute positioning. */ } #left { width: 500px; height: 50px; background: #ff0000; } #right { width: 100px; height: 50px; background: #00ff00; position: absolute; /* remove box from the normal flow */ right: 2%; /* position to the right */ } #left > ul, #right > ul { display: flex; /* will align flex items (li) in a row by default */ justify-content: flex-start; /* align li starting from the left edge */ list-style-type: none; padding: 0; } #left > ul li, #right > ul li { margin: 10px; } 
 <div id="topjob"> <div id="left"> <ul> <li><a href="#"><i class=""></i>LOGIN</a></li> <li><a href="#"><i class=""></i>REGISTER</a></li> </ul> </div> <div id="right"> <ul> <li> <a href="index.html"> <img src="images/mastercard.png" alt=""> </a> <li> <a href="index.html"> <img src="images/visa.png" alt=""> </a> </ul> </div> </div>

jsFiddle

+1
source

If you are interested in learning flexbox, there is a much better way to do this. (The accepted answer is quite in demand and will break on many devices, including mobile phones.)

 header { display: flex; align-items: center; height: 50px; background: gold; } nav { display: block; background: red; flex: 1; } nav a { text-transform: uppercase; } nav + div { background: lawngreen; flex: 0 0 auto; } 
 <header> <nav> <a href="#">Login</a> <a href="#">Register</a> </nav> <div> <img src="images/mastercard.png"> <img src="images/visa.png"> </div> </header>

Ive also improved your HTML to be more friendly to screen readers and search engines.

0
source

More articles:


All Articles