Question

如何在第二张图片上获得“基本”链接文字，这两张图片+文字居中？看起来我的帖子主要是代码，我会在我的问题中添加更多细节。

谢谢！

这是JSfiddle https://jsfiddle.net/fvg4c0j0/

 <style>

 body{margin:0;
padding:0;
   }
  #header {
background-color:#ff6600;
color:white;
text-align:left;
padding:2px;
  }

 #nav {
line-height:30px;
background-color:#fff000;
height:350px;
width:120px;
float:left;
padding:5px;

 }
    #section {
     width:350px;
    float:left;
     padding:10px;
   }
   #footer {
background-color:#737373;
color:white;
clear:both;
text-align:center;


     }
   #container {
margin:auto;
width:900px;
text-align:left;
overflow: hidden;

   }
  .inner_block {
   display: inline-block;
    text-align: center;
    width: 150px;
    height:200px;


  }

  img {
   width: 150px;
    }
    #basic {
    float:right;

   }
  </style>

这是css

buffer

Answer 1

你能说清楚，你想要图像上方的文字吗？还是坐在图像上？

好吧，如果我是你，那么我会做的就是html然后

<div class='inner'>
    <div class='inner-link'>
        <a href='#'>Basic</a>
    </div>
    <div class='inner-image'>
      <img src='x'>
    </div>
</div>

这是针对css的

inner{
  width:150px;
  height:150px;
}
inner-link{
  width:100%;
  text-align:center
}

Answer 2

<div class="main_block">

    <div class="inner_block">
        <a href="page2.html"><h1>Pro</h1></a>
        <img src=Grafik/talt.png>
    </div>

    <div class="inner_block">
        <a href="page2.html"><h1>Basic</h1></a>
        <img src=Grafik/talt.png >
    </div>    

</div><!--mainblock-->

css：

.main_block{
  text-align:center;
  width:750px;
}

如何在div里面的HTML中并排获取文本？

2 个答案: