Question

更新：在我的页面顶部，我有一张图片漂浮在左边。在它旁边，我有一个text-align：center的链接列表;在图像之后，最后一个链接居中，尽管它以div为中心，并且不会从左侧浮动的图像居中。

以下是UPDATED小提琴的链接：https://jsfiddle.net/john_h/ewcsfce9/6/

CSS：

h2 {text-align: center;
    color: blue;
    }

h2 a {
    text-align: center;
}

a.link {
    color: #00008A;
    text-decoration: underline;
    display: inline-block;
}

a.link:hover{
    color: orange; 
    font-size: 150%;
}

div.logo {
   float: left;
   width: 30%;
} 

div.links {
   float: right;
   width: 70%;
}

HTML：

    <div class="logo">
    <a href=https://answers.aseba.org/>
         <img src="http://www.aseba.org/graphics/ASEBA%20Logosmall.jpg" alt="ASEBA Logo">
   </a>
</div>

 <div class="links">
     <h2>
         <strong>
              <a class="link" href="https://answers.aseba.org/category/aseba-web">ASEBA-WEB Knowledgebase</a>
         </strong>   
    </h2>
<br>
     <h2>
         <strong>
              <a class="link" href="https://answers.aseba.org/category/aseba-pc">ASEBA-PC Knowledgebase</a>
         </strong>
     </h2>
<br>
     <h2>
          <strong>
              <a class="link" href="https://answers.aseba.org/category/aseba-network">ASEBA-Network Knowledgebase</a>
      </strong>
     </h2>
  <br>
     <h2>
         <strong>
               <a class="link" href="https://www.youtube.com/channel/UCIzvez_ZzkpM83-kInJX1HQ" target="_blank">ASEBA Support YouTube Channel!</a>
    </strong>
 </h2>
<br>
     <h2>
       <strong>
           <a class="link" href="https://answers.aseba.org/">Complete ASEBA Knowledgebase</a>
   </strong>
<br>       
 </h2>
 </div>
<hr>

我意识到我有几个选择。一个是创建一个“空白”元素，它在图像下面向左浮动，与图像本身的宽度相同。另一种是重塑徽标。

如何让链接保持在中心相对于徽标浮动？

谢谢！

Answer 1

试试这个

＆＃13;

h2 {text-align: center;
    color: blue;
    }

h2 a {
    text-align: center;
}

a.link {
    color: #00008A;
    text-decoration: underline;
    display: inline-block;
}

a.link:hover{
    color: orange; 
    font-size: 150%;
}

div.logo {
 width:30%;
 float:left;
} 
div.links {
  width:70%;
  float:right;
}

＆＃13;

 <div class="container">

 <div class="logo">
    <a href="https://answers.aseba.org/">
         <img src="http://www.aseba.org/graphics/ASEBA%20Logosmall.jpg" alt="ASEBA Logo">
   </a>
</div>
<div class="links">



     <h2>
         <strong>
              <a class="link" href="https://answers.aseba.org/category/aseba-web">ASEBA-WEB Knowledgebase</a>
         </strong>   
    </h2>
<br>
     <h2>
         <strong>
              <a class="link" href="https://answers.aseba.org/category/aseba-pc">ASEBA-PC Knowledgebase</a>
         </strong>
     </h2>
<br>
     <h2>
          <strong>
              <a class="link" href="https://answers.aseba.org/category/aseba-network">ASEBA-Network Knowledgebase</a>
      </strong>
     </h2>
  <br>
     <h2>
         <strong>
               <a class="link" href="https://www.youtube.com/channel/UCIzvez_ZzkpM83-kInJX1HQ" target="_blank">ASEBA Support YouTube Channel!</a>
    </strong>
 </h2>
<br>
     <h2>
       <strong>
           <a class="link" href="https://answers.aseba.org/">Complete ASEBA Knowledgebase</a>
   </strong>
<br>       
 </h2>

<hr>
 </div>
 </div>

＆＃13;

Answer 2

我认为你需要在链接周围添加一个div，然后在两者周围添加一个div。

见这里： https://jsfiddle.net/p7d35mjs/

    <div class="container">

<div class="logo">
    <a href=https://answers.aseba.org/>
        <img src="http://www.aseba.org/graphics/ASEBA%20Logosmall.jpg" alt="ASEBA Logo">
    </a>
</div>

<div class="links">


 <h2>
     <strong>
          <a class="link" href="https://answers.aseba.org/category/aseba-web">ASEBA-WEB Knowledgebase</a>
         </strong>   
    </h2>
    <br/>
     <h2>
         <strong>
              <a class="link" href="https://answers.aseba.org/category/aseba-pc">ASEBA-PC Knowledgebase</a>
         </strong>
     </h2>
     <br/>
     <h2>
          <strong>
              <a class="link" href="https://answers.aseba.org/category/aseba-network">ASEBA-Network Knowledgebase</a>
      </strong>
     </h2>
     <br/>
     <h2>
         <strong>
               <a class="link" href="https://www.youtube.com/channel/UCIzvez_ZzkpM83-kInJX1HQ" target="_blank">ASEBA Support YouTube Channel!</a>
         </strong>
     </h2>
     <br/>
     <h2>
       <strong>
           <a class="link" href="https://answers.aseba.org/">Complete ASEBA Knowledgebase</a>
       </strong>    
     </h2>
</div>
</div>

CSS：

h2 {text-align: center;
    color: blue;
    }

h2 a {
    text-align: center;
}

a.link {
    color: #00008A;
    text-decoration: underline;
    display: inline-block;
}

a.link:hover{
    color: orange; 
    /*font-size: 150%;*/
}

div.logo {
   float: left;
} 

div.links {
  float: left;
}

Answer 3

只改变：

div.logo {
   float: left;
   margin-bottom: 100%;
}

https://jsfiddle.net/ewcsfce9/4/

Answer 4

它并不优雅，但请尝试：

div.logo {
 float: left;
 height: 800px;
}

左侧浮动图像，文本对齐中心。在图像之后，链接不排队

4 个答案: