Question

大家好， vertical-align：middle在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>

Answer 1

可以将vertical-align:middle与display:table-cell结合使用来实现此效果。

我将你的每一年都包裹在span并使用了这个CSS：

.Year {
  display:table;
}
.Year span {
  display:table-cell;
  vertical-align:middle;
}

请参阅此处的小提琴：http://jsfiddle.net/stephendavis89/7QPx8/1/（只有年份垂直居中）

P.S。你可能想要考虑左移几年，几个月和几个月，而不是留下定位它们。

Answer 2

vertical-align不用于设置内联元素中的对齐方式。为了更好地了解它的作用和不作用，请查看此页面。基本上，vertical-align旨在替换元素的旧valign属性或元素之类的align属性。它不会做的是垂直对齐div中的文本。您必须通过填充或定位来完成此操作。

http://phrogz.net/css/vertical-align/index.html

DIV标签中的垂直对齐

2 个答案: