如何将文本与框的边缘对齐

我想将一些文本对齐到框的边缘上方。

该框是一个内联块元素，我要对齐的文本是<h2>2014 Pictures!</h2> .

这就是它现在的样子。

http://jsfiddle.net/Zr5yt/3/

如您所见，问题是文本向左偏转。

我希望2014 pictures!可以从图片框的边缘以上开始。我已经坚持了好几天了;谁能帮忙？

.HTML

 <title>Picture Gallery</title>
    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
    <link href='<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet' type='text/css'> rel='stylesheet' type='text/css' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
  <body>
    <div class="container clearfix">
      <div class="grid_12">
        <h1>Picture Gallery</h1>
      </div>  
      <div class="grid_3">
        <ul class="nav">
          <li class="first"><a href="#">Project 1</a></li>
          <li><a href="#">Project 2</a></li>
          <li><a href="#">Project 3</a></li>
          <li><a href="#">Project 4</a></li>
          <li><a href="#">Project 5</a></li>
          <li class="last"><a href="#">Contact Me</a></li>
        </ul>
      </div>
      <div class="grid_9 omega">
        <h2>Introduction</h2>
        <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p> 
        <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
        <a href="#" class="btn"> Click to learn about me</a>
      </div> 

      <div id="gallery" class="grid_12">
        <h2>2014 Pictures!</h2>
        <img src="img/1 crop.jpg" alt="Picture"> 
        <img src="img/2 crop.jpg" alt="Picture">
        <p><a href="#" class="btn-small"> For more photos click here </a></p>
      </div>

  </body>
</html>

样式 CSS

      body {
    font-family:'Source Sans Pro', sans-serif;
    color: #FF00DB;
    background: #A1B3FA ;
  }
  a {
    color: #0000FF;
    text-decoration: none;
  }
  h1 {
    font-size: 5em;
    letter-spacing: 1.5px;
    text-align: center;
  }
  h2 {
    font-size: 1.750em;
    letter-spacing: 1.5px;
    margin: 20px 20px 0 0;
    text-align: left;
  }
  .btn {
    color: #FF0000;
    background: #4FB69F url('img/texture.png') no-repeat right top;
    padding: 10px 10px;
    margin: 0px 0px 0 0;
    border-radius: 40px;
    text-transform: uppercase;
  }
  .btn:hover {
    background-color: #4c4756;
  }
  ul.nav {
    margin-right: 20px;
    list-style: circle;
    float: left;
  }
  ul.nav li {
    margin-bottom: 0px; 
  }

  #gallery {
    clear: both;
     text-align: center;
  }

  #gallery img{
    border: 8px solid;
    color: #0000FF;
    margin: 40px 0px 0px 0px;
  }

网格 CSS

.grid_1 { width: 65px; }
.grid_2 { width: 150px; }
.grid_3 { width: 235px; }
.grid_4 { width: 320px; }
.grid_5 { width: 405px; }
.grid_6 { width: 490px; }
.grid_7 { width: 575px; }
.grid_8 { width: 660px; }
.grid_9 { width: 745px; }
.grid_10 { width: 830px; }
.grid_11 { width: 915px; }
.grid_12 { width: 1000px; }
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    margin: 0 20px 10px 0;
    float:left;
    display: block;
}
.alpha{margin-left:0px;}
.omega{margin-right:0px;}
.container{
    width: 1000px; 
    margin: auto;
}

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}

更新了 Jsfiddle

刚刚添加

 #gallery h2 {
      text-align:center;
  }

这是你想要的方式吗？

相关内容

最新更新

热门标签：