浮動圖像左側，文本對齊中心。圖像後，鏈接不排隊

更新：在我的頁面頂部，我有一個圖像左側浮動。在它旁邊，我有一個鏈接列表是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>

我知道我有幾個選擇。一個會創建一個「空白」元素，在圖像下面左側浮動，與圖像本身的寬度相同。另一種是重新制作更大的標誌。

如何才能讓鏈接保持浮動在相對於徽標的中心？

謝謝！

來源

2015-12-21 john_h

您是否希望左側的徽標位於徽標底部？ – Mohamed

我希望左側的圖像和鏈接相對於徽標居中......在小提琴中，您會注意到前兩個鏈接相對於徽標居中，下面的鏈接相對於div居中。 –

檢查並告訴我這是你想要的嗎？ https://jsfiddle.net/firnas10/6cLgdmst/ – Mohamed

試試這個

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>

來源

2015-12-21 16:11:18 Diginari

這是完美的，因爲現在我不需要擔心如果我添加鏈接的高度。非常感謝你的幫助！ –

謝謝，接受答案，如果它幫助你的朋友@ john_h – Diginari

我認爲你需要添加一個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; 
}

來源

2015-12-21 16:14:00 Jared

只有改變：

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

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

來源

2015-12-21 16:21:22 Sevi

這不是優雅的住宿請嘗試：

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

來源

2015-12-21 16:27:43

浮動圖像左側，文本對齊中心。圖像後，鏈接不排隊

回答

相關問題