HTML + CSS两个头彼此相邻的文本垂直对齐

-2

我有什么：

（添加代码，因为jsfiddle-only是不允许的）

HTML：

<div class="Box1"><a href="#"> 
          <img src="http://imgur.com/CAcW4Yw.jpg"> 
           <div class="txtBox1"><h2>2014 02 16</h2><h6>vilniaus KM laimėjo prieš aisčius - <br> kristupas totoris pataikė tris tritaškius</h6></div></a> 
        </div

CSS：

h6{ 
     display:inline-block; 
     padding:0; 
     margin:25px 0 10px 25px; 
     font-size:24px; 
     font-weight:400; 

     text-transform:uppercase; 
     color:rgb(230,230,230); 

    } 

    h2{ 
     display:inline; 
     text-transform:uppercase; 
     padding:0; 
     margin:0px 0 10px 30px; 
     font-size:13; 
     font-weight:bold; 
     color:#e6540c; 
    } 

.txtBox1{ 
     position: absolute; 
     height: 140px; 
     width: 100%; 
     background:url(http://imgur.com/c9KcXjv.jpg); 
     bottom: 0; 

    } 


    .Box1{ 

     float:left; 
     width: 703px; 
     height: 589px; 
     overflow: hidden; 
     position: relative; 
     margin: 0px 0px 15px 0px; 
     border-radius: 5px; 

    }

我一定要玩的盒子再次和绝对位置？或者有一些简单的垂直对齐方法？

来源

2014-06-25 GytisK

哇，你所有的问题似乎是同样的事情。 – j08691

我基本上从0学习:)如果这将回答另一个问题，我问我只会使用它。只是想知道是否必须制作两个盒子并再次使用绝对/相对，或者可以使用其他方法轻松对齐。 – GytisK

你正在学习的是公平的 - 但研究应该在这个过程中发挥更大的作用。看看'vertical-align'属性。 – CBroe

调整保持你的HTML干净。关闭所有标签。

<div class="Box1"> 
    <a href="#"> 
     <img src="http://imgur.com/CAcW4Yw.jpg" /> 
     <div class="txtBox1"> 
      <h2>2014 02 16</h2> 
      <h6> 
       vilniaus KM laimėjo prieš aisčius - <br /> 
       kristupas totoris pataikė tris tritaškius 
      </h6> 
     </div> 
    </a> 
</div>

我不主张这样做，但如果align top失败，那么强制你的定位。

注意：我添加了边框，以便您可以看到H2和H6占据的空间。

h6 { 
    display: inline-block; 
    padding: 0px; 
    margin: 25px 0px 10px; 
    font-size: 24px; 
    font-weight: 400; 
    text-transform: uppercase; 
    color: #E6E6E6; 
    border: 1px solid #FFF; 
    top: 0px; 
    position: absolute; 
    left: 120px; 
} 
h2 { 
    display: inline-block; 
    text-transform: uppercase; 
    padding: 0px; 
    margin: 0px 0px 10px; 
    font-weight: bold; 
    color: #E6540C; 
    border: 1px solid #FFF; 
    top: 25px; 
    position: absolute; 
}

虽然把你的定位标签分解为div，并且使用H1-h6仅用于文本的格式化，但是好得多。那么你不必担心原生格式的冲突，你正试图去做。

来源

2014-06-25 21:58:36 Brian