[英]Aligning text inside a DIV to the bottom
look at this jsfiddle http://jsfiddle.net/buqhK/embedded/result/ . 看看这个jsfiddle http://jsfiddle.net/buqhK/embedded/result/ 。 That white space is logo and on the right side is that I want to move to the bottom so it's on the same height as logo.
那个白色的空间是徽标,右侧是我想要移动到底部,所以它与徽标的高度相同。 That text
Lorania
. 那文
Lorania
。 How can I do it? 我该怎么做?
Here is my HTML: 这是我的HTML:
<div id="header">
<div id="header-wrap">
<div id="logo"></div>
<div id="header-text">Lorania</div>
<hr>
<div id="menu">
<ul>
<li><a href="#" class="righter">aktualley</a>
</li>
<li><a href="#" class="righter">local thing</a>
</li>
<li><a href="#" class="righter">local club</a>
</li>
<li><a href="#" class="righter">local lore</a>
</li>
<li><a href="#" class="righter">contact</a>
</li>
<li><a href="#" class="righter2">photogaller</a>
</li>
<li><a href="#">contast</a>
</li>
</ul>
</div>
</div>
</div>
and here is my CSS 这是我的CSS
/* Main CSS*/
html, body{
margin:0;
padding:0;
height:100%;
width:100%;
font-family: "Century Gothic", "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, sans-serif;
}
/* HEADER */
#header {
background-color: black;
background-position: center center;
background-repeat: repeat-y;
height: 172px;
width: 100%;
position: relative;
}
#header-wrap {
text-align: center;
margin: 0 auto;
height: 140px;
width: 800px;
padding-top: 30px;
}
#logo {
background-color: white;
background-repeat: no-repeat;
height: 80px;
width: 330px;
margin-bottom: 20px;
float: left;
}
#header-text {
color: #fff;
font-size: 40px;
float: right;
}
#header hr {
clear: both;
border: 0;
height: 1px;
background: transparent;
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0));
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
display: block;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
#menu a {
color: white;
text-decoration: none;
}
#menu a:hover {
text-decoration: underline;
}
#menu a:active {
text-decoration: underline;
text-shadow: 0 0 2px white;
}
.righter {
margin-right: 39px;
}
.righter2 {
margin-right: 38px;
}
Thank you! 谢谢!
How about this? 这个怎么样?
#header-text {
color: #FFFFFF;
float: right;
font-size: 40px;
padding-top: 40px; }
I faced a similar problem recently. 我最近遇到了类似的问题。 What I did was put the logo and the text in its own div.
我所做的是将徽标和文本放在自己的div中。 The outer div had
display:inline-block
so the image would expand the div to its minimum height, width:100%
so it takes up all the width of the parent, and position:relative
so the text can be absolutely aligned with the logo. 外部div有
display:inline-block
所以图像会将div扩展到它的最小高度, width:100%
所以它占用了父级的所有宽度,而position:relative
所以文本可以与徽标完全对齐。 I also removed the logo's bottom margin, which could be added to the outer div "header-top" if needed. 我还删除了徽标的底部边距,如果需要,可以将其添加到外部div“header-top”。
I know it's messy, but I haven't really found a better way myself. 我知道它很乱,但我自己并没有找到更好的方法。 Anyway, this is what I came up with, is that what you wanted?
无论如何,这就是我想出的,那就是你想要的吗? http://jsfiddle.net/buqhK/3/embedded/result/
http://jsfiddle.net/buqhK/3/embedded/result/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.