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

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

text css

Text 如何将文本与框的边缘对齐？,text,alignment,css,Text,Alignment,Css,我想在方框边缘上方对齐一些文本框是一个内联块元素，我要对齐的文本是2014图片这就是它现在的样子正如您所看到的，问题是文本向左倾斜如果2014图片，我会喜欢的可以从图片框边缘上方开始。我已经被困在这个问题上好几天了；有人能帮忙吗 HTML <title>Picture Gallery</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="scr

我想在方框边缘上方对齐一些文本

框是一个内联块元素，我要对齐的文本是

2014图片
这就是它现在的样子

正如您所看到的，问题是文本向左倾斜
如果2014图片，我会喜欢的可以从图片框边缘上方开始。我已经被困在这个问题上好几天了；有人能帮忙吗
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
.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}

更新
刚刚加上
 #gallery h2 {
      text-align:center;
  }

这是您想要的方式吗？您好，谢谢您的回复。我实际上是想让文本从盒子边缘开始。因此，文本“2014”和方框都是垂直对齐的。我只是不知道如何将两者对齐。这更清楚了吗？这篇博客讨论了做同样的事情，但我不确定我需要什么代码来将它转换成html。我认为这可能与使页边距垂直对齐有关。你可以用图片展示你想做什么，很抱歉，我没听清楚，而且我的英语很差
 #gallery h2 {
      text-align:center;
  }