OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Images not center aligning correctly

  • Thread starter Thread starter Flimmykins
  • Start date Start date
F

Flimmykins

Guest
sorry if this is a simple or silly issue.

Essentially I'm trying to centre align all the images on my page, however the alignment isn't working as I want, you can see on my site here. This is the CSS I'm using for the three main sections. They align centre, but they use the left side of each image, rather than the middle of the image being the focal.

Code:
.links {
position: fixed;
text-align: center;
top: 50%;
left: 50%;
}
.footer {
position: fixed;
text-align: center;
top: 75%;
left: 50%;
}
.header {
position: fixed;
text-align: center;
top: 25%;
left: 50%;
}

Due to not being able to post more than 2 links, you can find the nikki.html and style.css here if you need to see more: https://github.com/Flimmykins/Flimmykins.github.io

I tried changing the left percentage to manually do it myself, but that made the site display oddly on different things. Thanks for any help.
<p>sorry if this is a simple or silly issue.</p>

<p>Essentially I'm trying to centre align all the images on my page, however the alignment isn't working as I want, you can see on my <a href="http://flimsy.site/nikki" rel="nofollow">site here</a>. This is the CSS I'm using for the three main sections. They align centre, but they use the left side of each image, rather than the middle of the image being the focal.</p>

<pre><code>.links {
position: fixed;
text-align: center;
top: 50%;
left: 50%;
}
.footer {
position: fixed;
text-align: center;
top: 75%;
left: 50%;
}
.header {
position: fixed;
text-align: center;
top: 25%;
left: 50%;
}
</code></pre>

<p>Due to not being able to post more than 2 links, you can find the <strong>nikki.html</strong> and <strong>style.css</strong> here if you need to see more: <a href="https://github.com/Flimmykins/Flimmykins.github.io" rel="nofollow">https://github.com/Flimmykins/Flimmykins.github.io</a></p>

<p>I tried changing the left percentage to manually do it myself, but that made the site display oddly on different things. Thanks for any help.</p>
Continue reading...
 
Top