Question

我想在框的边缘上方对齐一些文字。

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

这就是它现在的样子。

正如您所看到的那样，问题是文本向左转。

如果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>

STYLE 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;
  }

GRID 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}

Answer 1

更新了Jsfiddle

刚刚添加

 #gallery h2 {
      text-align:center;
  }

这是你想要的方式吗？

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

1 个答案: