与 DIV 标签垂直对齐
大家好， 垂直对齐：中间在 div 中不起作用。您能检查一下我的代码中的错误吗？我想在不使用 top,left 属性的情况下将文本与 DIV 标签对齐。请尽快回复...... 提前致谢，
这是我的代码......
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body{
font-size:0.7em;
font-family:Arial;
}
.TimeFrame,.YearFrame,.QuarterFrame,.MonthFrame,.Year,.Quarter,.Month,.PrevYear,.NextYear{
position:absolute;
height:20px;
}
.YearFrame,.QuarterFrame,.MonthFrame{
border:1px solid black;
border-radius:4px;
}
.TimeFrame{
top:10px;
width:716px;
}
.YearFrame{
width:145px;
left:17px;
}
.QuarterFrame{
width:121px;
left:200px;
}
.MonthFrame{
width:439px;
left:330px;
}
.Year,.Quarter,.Month{
cursor:pointer;
border-right:1px solid black;
vertical-align:middle;
}
.Year{
padding:0px 8px; 0px 8px;
}
.Quarter{
padding:0px 5px; 0px 5px;
}
.Month{
padding:0px 6px; 0px 6px;
}
.PrevYear{
left:0px;
top:2px;
}
.NextYear{
left:165px;
top:2px;
}
</style>
</HEAD>
<BODY>
<div class="TimeFrame">
<div class="PrevYear"><img src="round_arrow_left.png" alt="Previous" title="Previous"></div>
<div class="YearFrame">
<div class="Year" style="left:1px;">2000</div>
<div class="Year" style="left:49px;">2001</div>
<div class="Year" style="left:97px;border:none;">2002</div>
</div>
<div class="NextYear"><img src="round_arrow_right.png" alt="Next" title="Next"></div>
<div class="QuarterFrame">
<div id="Q1" class="Quarter" style="left:1px;">Q1</div>
<div id="Q2" class="Quarter" style="left:31px;">Q2</div>
<div id="Q3" class="Quarter" style="left:61px;">Q3</div>
<div id="Q4" class="Quarter" style="left:91px;border:none;">Q4</div>
</div>
<div class="MonthFrame">
<div id="JAN" class="Month" style="left:1px;">Jan</div>
<div id="FEB" class="Month" style="left:37px;">Feb</div>
<div id="MAR" class="Month" style="left:74px;">Mar</div>
<div id="APR" class="Month" style="left:111px;">Apr</div>
<div id="MAY" class="Month" style="left:146px;">May</div>
<div id="JUN" class="Month" style="left:185px;">Jun</div>
<div id="JUL" class="Month" style="left:221px;">Jul</div>
<div id="AUG" class="Month" style="left:252px;">Aug</div>
<div id="SEP" class="Month" style="left:290px;">Sep</div>
<div id="OCT" class="Month" style="left:328px;">Oct</div>
<div id="NOV" class="Month" style="left:363px;">Nov</div>
<div id="DEC" class="Month" style="left:401px;border:none;">Dec</div>
</div>
</div>
</BODY>
</HTML>
Hi all,
vertical-align:middle is not working in div. Can you please check the bug in my code. I want to align the text with in DIV tag without using top,left properties.Please reply as soon as possible.....
Thanks in advance,
Here is my code.....
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body{
font-size:0.7em;
font-family:Arial;
}
.TimeFrame,.YearFrame,.QuarterFrame,.MonthFrame,.Year,.Quarter,.Month,.PrevYear,.NextYear{
position:absolute;
height:20px;
}
.YearFrame,.QuarterFrame,.MonthFrame{
border:1px solid black;
border-radius:4px;
}
.TimeFrame{
top:10px;
width:716px;
}
.YearFrame{
width:145px;
left:17px;
}
.QuarterFrame{
width:121px;
left:200px;
}
.MonthFrame{
width:439px;
left:330px;
}
.Year,.Quarter,.Month{
cursor:pointer;
border-right:1px solid black;
vertical-align:middle;
}
.Year{
padding:0px 8px; 0px 8px;
}
.Quarter{
padding:0px 5px; 0px 5px;
}
.Month{
padding:0px 6px; 0px 6px;
}
.PrevYear{
left:0px;
top:2px;
}
.NextYear{
left:165px;
top:2px;
}
</style>
</HEAD>
<BODY>
<div class="TimeFrame">
<div class="PrevYear"><img src="round_arrow_left.png" alt="Previous" title="Previous"></div>
<div class="YearFrame">
<div class="Year" style="left:1px;">2000</div>
<div class="Year" style="left:49px;">2001</div>
<div class="Year" style="left:97px;border:none;">2002</div>
</div>
<div class="NextYear"><img src="round_arrow_right.png" alt="Next" title="Next"></div>
<div class="QuarterFrame">
<div id="Q1" class="Quarter" style="left:1px;">Q1</div>
<div id="Q2" class="Quarter" style="left:31px;">Q2</div>
<div id="Q3" class="Quarter" style="left:61px;">Q3</div>
<div id="Q4" class="Quarter" style="left:91px;border:none;">Q4</div>
</div>
<div class="MonthFrame">
<div id="JAN" class="Month" style="left:1px;">Jan</div>
<div id="FEB" class="Month" style="left:37px;">Feb</div>
<div id="MAR" class="Month" style="left:74px;">Mar</div>
<div id="APR" class="Month" style="left:111px;">Apr</div>
<div id="MAY" class="Month" style="left:146px;">May</div>
<div id="JUN" class="Month" style="left:185px;">Jun</div>
<div id="JUL" class="Month" style="left:221px;">Jul</div>
<div id="AUG" class="Month" style="left:252px;">Aug</div>
<div id="SEP" class="Month" style="left:290px;">Sep</div>
<div id="OCT" class="Month" style="left:328px;">Oct</div>
<div id="NOV" class="Month" style="left:363px;">Nov</div>
<div id="DEC" class="Month" style="left:401px;border:none;">Dec</div>
</div>
</div>
</BODY>
</HTML>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
可以将
vertical-align:middle与display:table-cell结合使用来实现此效果。我将你的每一年包裹在一个
span中并使用了这个 CSS：请参阅此处的小提琴：http://jsfiddle.net/stephendavis89/7QPx8/1/（只有年份垂直居中）
PS您可能需要考虑左浮动您的年，季度和月，而不是左浮动定位它们。
It's possible to use
vertical-align:middlecombined withdisplay:table-cellto achieve this effect.I wrapped each of your Years in a
spanand used this CSS:See fiddle here: http://jsfiddle.net/stephendavis89/7QPx8/1/ (only the years are vertically centered)
P.S. You might want to consider left floating your years, quarters, and months instead of left positioning them.
Vertical-align 并不是为了设置内联元素的对齐方式，例如。为了更好地了解它的作用和不作用，请查看此页面。基本上，vertical-align 旨在替换元素的旧 valign 属性或元素等内容的align 属性。它不会做的是垂直对齐 div 中的文本。您必须通过填充或定位来做到这一点。
http://phrogz.net/css/vertical-align/index.html
vertical-align isn't intended to set the alignment in inline elements like. For a better understanding of what it does and doesn't do, check out this page. Basically vertical-align is intended to replace the old valign attribute for elements or the align attribute for things like elements. What it won't do is vertically align text in a div. You will have to do this through padding or positioning.
http://phrogz.net/css/vertical-align/index.html