向左浮动图像，文本居中对齐。图片后，链接不对齐答案

【问题标题】：Floated image left, text align center. After image, links don't line up向左浮动图像，文本居中对齐。图片后，链接不对齐
【发布时间】：2023-04-04 05:10:01
【问题描述】：

更新：在我的页面顶部，我的图像向左浮动。在它旁边，我有一个文本对齐链接列表：中心；在图像之后，最后一个链接居中，尽管它以 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>

我意识到我有几个选择。一种是创建一个“空白”元素，它在图像下方向左浮动，与图像本身的宽度相同。二是把logo改大了。

我怎样才能让链接保持浮动在中心，相对于徽标？

谢谢！

【问题讨论】：

您希望徽标位于左侧，链接位于徽标底部的中心吗？
我想要左边的图像，并且链接相对于徽标居中...在小提琴中，您注意到前两个链接相对于徽标居中，下面的链接是相对于 div 居中。
检查这个并告诉我这是你想要的吗？ jsfiddle.net/firnas10/6cLgdmst
这是因为div的高度。将 div.logo 的高度设置为 5000px，你就会明白我的意思了。您需要对其进行排序
@john_h 请检查我的小提琴它的更新

标签： html css image css-float

【解决方案1】：

只改变：

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

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

【讨论】：

【解决方案2】：

它并不优雅，但是，尝试：

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

【讨论】：

【解决方案3】：

我认为您需要在链接周围添加一个 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;
}

【讨论】：

【解决方案4】：

试试这个

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>

【讨论】：

这是完美的，因为如果我添加更多链接，我现在不需要担心高度。非常感谢您的帮助！
谢谢，如果对你有帮助，请接受答案，伙计@john_h