UPDATED: I recently made some adjustments to my webpage layout. There is an image at the top of the page that is floated left, and next to it, there is a list of links centered with text-align: center. However, the last link is centered within the div but not relative to the floated left image.
If you want to view the UPDATED fiddle, click on this link: https://jsfiddle.net/john_h/ewcsfce9/6/
The CSS for the design:
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%;
}
The HTML structure:
<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>
I am considering two options to solve this issue. One option is to create a "blank" element below the image that floats left with the same width as the image. The other option is to redesign the logo to make it bigger.
Does anyone have any suggestions on how I can keep the links aligned in the center relative to the logo?
Thank you!