Css 如何使页面左上方的徽标与下方的文字对齐?
如何使页面左上方的徽标与下方的文字对齐?此外,我需要的标志,以保持与它下面的文字对齐,无论我做什么大小的浏览器窗口。我曾尝试更改block_header类的填充、边距和浮动设置,但如果浏览器窗口未打开到正确的大小,则徽标和文本将不对齐。这是我的css:Css 如何使页面左上方的徽标与下方的文字对齐?,css,position,css-float,alignment,padding,Css,Position,Css Float,Alignment,Padding,如何使页面左上方的徽标与下方的文字对齐?此外,我需要的标志,以保持与它下面的文字对齐,无论我做什么大小的浏览器窗口。我曾尝试更改block_header类的填充、边距和浮动设置,但如果浏览器窗口未打开到正确的大小,则徽标和文本将不对齐。这是我的css: .main {width:100%; padding:0; margin:0 auto; min-width: 1020px; overflow: hidden;} .header { background:url(images/slider_b
.main {width:100%; padding:0; margin:0 auto; min-width: 1020px; overflow: hidden;}
.header { background:url(images/slider_bgpng200.png); background-repeat: repeat-x; padding:0; margin:0 auto; width: 100%; }
.header .headertop{width: 100%; background: #d3e5e8; height: 30px;}
.block_header {margin:0 auto; width:1200px; padding:0; border:none; }
.space { float:left; padding:0; margin:0; }
.header_text { width:200px; float:right; font:normal 11px Tahoma, Geneva, sans-serif; color:#9a9a9a; padding:6px 10px 10px 10px; margin:0; text-align:center;}
.slider { background: transparent; margin:0 auto; padding:0; height:420px;}
.slider .gallery { margin:0 auto; width:980px; height:420px; padding:0;}
.slider .textholder {padding-top: 110px; float: left; width: 44%; font-family: 'Roboto', sans-serif; font-size: 40px; color: #93a0a2;padding-left: 30px;}
.formbox{float: right; width: 48%; padding-top: 90px; padding-right: 40px;}
以下是html:
<div class="main">
<div class="header">
<div class="headertop"> <img src="images/avidestlogo50perresave.png" border="0" alt="logo" />
<div class="header_text"><a href="#">Email</a> | <a href="#">Client Login</a>
</div>
</div>
<div class="block_header">
<div class="space"><a href="index.html"></a>
</div>
<div class="slider">
<div class="gallery">
<div class="textholder">
Where Student and <br />
Alumni Freelancers <br /> Get Hired
</div>
<div class = "formbox">Form is here
</div>
</div>
</div>
</div>
</div>
</div>
|
学生和
校友自由职业者
被雇佣
表格在这里
该网站位于avidest.com/schneer,您可以看到我在说什么。感谢您的帮助。徽标通常设置为CSS背景。然后,您可以使用边距和填充的组合来对齐包含背景的元素中的文本
<div class="logo">Welcome to XYZ</div>
欢迎来到XYZ
CSS:
.title{
背景图片:url(…);
背景重复:无重复;
高度:60px;
左侧填充:50px;谢谢,我试过了,但如果更改浏览器窗口大小,它仍然与文本不对齐。
.title {
background-image:url(...);
background-repeat:no-repeat;
height:60px;
padding-left:50px; <-- move the text to the right of the logo
padding-top:10px; <-- add a bit of whitespace at the top
...font styling etc...
}