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

Question

更新：在我的页面顶部，我有一个图像左侧浮动。在它旁边，我有一个链接列表是text-align：center;在图像之后，最后一个链接居中，虽然它以div为中心，而不是从左侧浮动的图像居中。

这里是一个更新的小提琴链接：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

试试这个

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

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

Answer 2

我认为你需要添加一个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; 
}