[英]How to align the div in header right ,left and center
.header-cont { width: 100%; position: fixed; top: 0px; } .header { height: 50px; background: #f0f0f0; border: 1px solid #ccc; width: 80%; margin: 0px auto; line-height: 0px; } .maindiv { box-shadow: 15px 0px 10px -11px rgba(0, 0, 0, 0.1), -15px 0px 10px -11px rgba(0, 0, 0, 0.1); width: 960px; background: #f0f0f0; border: 1px solid #ccc; height: 2000px; margin: 70px auto; } label { float: left; width: 15%; margin-top: .5%; } form ul { list-style-type: none; margin: 0; } form ul li { clear: both; margin-top:2%; }
<html> <body> <!-- Star Here Top Title Bar --> <div class="header-cont"> <div class="header"> <form> <ul> <li> <div> Here is the logo want to b in left corner <label> <img src=""> <!-- Logo in left side corner--> `enter code here` </label> <div> <div > Here is the profile picture i want to b it in center <label> <img src=""><!-- Profile Picture in center --> </label> </div> Here is user name wnt to be in right side <label> <a href="" id="welcome">Welcome User!!</a><!-- Right Side--> </label> Login and sign up want to b in Right corner <label> <a href="#">Login</a><!-- Right Side Corner--> <a href="#">Signup</a> </label> </li> </ul> </form> </div> </div> <div class="maindiv"> <h1>This is Content Page</h1> </div> </body> </html>
拿3 <div>给他们id和width:33.33%; 给float:left;
在第一个div内放置你的标志，在第二个放置个人资料图片，在第三个放另外2个<div> width:50%; 每个和欢迎用户设置text-align:left; 并登录和注册设置text-align:right;
根据您的需要改变宽度。
.container{ width:100%; } .left { float:left; width:33.33%; text-align: left; } .center { display: inline-block; margin:0 auto; width:33.33%; text-align: center; } .right { float:right; width:33.33%; text-align: right; }
<div class="container"> <div class="left"><!-- left contents --> </div> <div class="center"><!-- center contents --> </div> <div class="right"><!-- right contents --> </div> </div>
将div左对齐，水平头对齐中心，将div右水平对齐
[英]align a div to the left a header to the center and a div to right horizontally
我如何在页眉和页脚 div 之间垂直对齐 div 左、中、右
[英]how do i vertically align div left, center, right between header and footer div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.