如何在标题的右侧,左侧和中间对齐div

时间:2015-02-11 10:41:59

标签: html css



.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>
&#13;
&#13;
&#13;

Thiz is output of the program, i want to change this header

2 个答案:

答案 0 :(得分:0)

3点<div>给他们ID,width:33.33%;float:left;

在第一个div内部放置您的徽标,在第二个放置个人资料图片,在第三个放置另外两个<div> width:50%;每个{和1}}和欢迎用户设置text-align:left;以及登录和签名设置text-align:right;

答案 1 :(得分:0)

根据您的需要更改宽度。

&#13;
&#13;
    .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;
    }
&#13;
<div class="container">
<div class="left"><!-- left contents --> </div>
<div class="center"><!-- center contents --> </div>
<div class="right"><!-- right contents --> </div>
</div>
&#13;
&#13;
&#13;