Jump to content
Please Use CODE Tags

How to Center Img in Div Using CSS

KraftDinner
By KraftDinner
in Programming
 Share
Posted

As the title suggest I need to center my img which is contained in my "banner" div so that is completely aligned with my container which is 800px wide. I want to center it using CSS in my style sheet, I'm a little bit of a web dev noob so let me know if I need to add anything else to the post.

 

HTML Code:

<body>		<div id="container">					<div id="banner">				<figure>					<img src="Images/websitebanner.png" alt="Banner" height="300" width="800" />				</figure> 							</div>
Link to comment
https://linustechtips.com/topic/509360-how-to-center-img-in-div-using-css/
Share on other sites
Link to post
Share on other sites
Posted

You may want to consider making it responsive at start. It's just a pain to do it afterwards and it's quite simple.

 

I'd recommend thenewbostons tutorials on it. They are easy to follow and makes your website so much better since you'll only need one site for computers, laptops, phones, tablets etc. It will resize for all screens.

 

So check him out if you're interested. But if you feel it's too hard. Just continue the way you are and do the responsiveness later. (Simply a recommendation that could save you a lot of hassle later on once you might want to do it)

Link 1 (easier tutorial simply explaining percentages etc, pretty easy stuff if you know the basics of html/css)

Link 2 (a bit harder but I'm sure you'll be able to handle it)

Spoiler

System:

i5 3570k @ 4.4 GHz, MSI Z77A-G43, Dominator Platinum 1600MHz 16GB (2x8GB), EVGA GTX 980ti 6GB, CM HAF XM, Samsung 850 Pro 256GB + Some WD Red HDD, Corsair RM850 80+ Gold, Asus Xonar Essence STX, Windows 10 Pro 64bit

PCPP:

http://pcpartpicker.com/p/znZqcf

 

Link to post
Share on other sites
Posted
  • Author

You may want to consider making it responsive at start. It's just a pain to do it afterwards and it's quite simple.

 

I'd recommend thenewbostons tutorials on it. They are easy to follow and makes your website so much better since you'll only need one site for computers, laptops, phones, tablets etc. It will resize for all screens.

 

So check him out if you're interested. But if you feel it's too hard. Just continue the way you are and do the responsiveness later. (Simply a recommendation that could save you a lot of hassle later on once you might want to do it)

Link 1 (easier tutorial simply explaining percentages etc, pretty easy stuff if you know the basics of html/css)

Link 2 (a bit harder but I'm sure you'll be able to handle it)

Sweet thanks for the resources I'll check these out rn!

Link to post
Share on other sites
Posted

Tried this before, won't work ;/

If you could give an example (screenshot) of what it looks like and then explain what you want it to look like. Because I'm trying to get an error but when I do what you've done I think I'm getting what you want.

 

So a screenshot and preferably what you've already got in the stylesheet and the rest of the html would be helpful.

Spoiler

System:

i5 3570k @ 4.4 GHz, MSI Z77A-G43, Dominator Platinum 1600MHz 16GB (2x8GB), EVGA GTX 980ti 6GB, CM HAF XM, Samsung 850 Pro 256GB + Some WD Red HDD, Corsair RM850 80+ Gold, Asus Xonar Essence STX, Windows 10 Pro 64bit

PCPP:

http://pcpartpicker.com/p/znZqcf

 

Link to post
Share on other sites
Posted

 

As the title suggest I need to center my img which is contained in my "banner" div so that is completely aligned with my container which is 800px wide. I want to center it using CSS in my style sheet, I'm a little bit of a web dev noob so let me know if I need to add anything else to the post.

 

HTML Code:

<body>		<div id="container">					<div id="banner">				<figure>					<img src="Images/websitebanner.png" alt="Banner" height="300" width="800" />				</figure> 							</div>

 

The code below perfectly centres the logo for me in my Chrome browser. (basically what @N0ps32 said.)

If it doesn't work for you, either your browser is running some custom addons, or you have other CSS rules affecting the layout.

<!DOCTYPE html><html lang="en">	<head>		<meta charset="UTF-8" />		<meta name="description" content=""/>		<meta name="keywords" content=""/>		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">		<title>KraftDinner Test</title>		<style type="text/css">    #container {      width: 1080px;      background: #2e2e2e;      margin: auto;    }    #banner {      text-align: center;    }    </style>	</head><body>		<div id="container">					<div id="banner">      				<figure>					<img src="http://linustechtips.com/main/public/style_images/28_ltt-logo.png" alt="Banner" />				</figure> 							</div>          </div>		<!--# Footer: End -->			<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>		<script>		$(document).ready(function() {				});		</script>	</body></html>

Desktop: KiRaShi-Intel-2022 (i5-12600K, RTX2060) Mobile: OnePlus 5T | [REDACTED] - 50GB US + CAN Data $34/month
Laptop: Lenovo Yoga 7i (16") 82UF0015US (i7-12700H, 16GB/2TB RAM/SSD, A370M GPU) Tablet: Lenovo Tab Plus (256GB)
Camera: Canon M6 Mark II | Canon Rebel T1i (500D) | Canon SX280 Music: Spotify Premium (CIRCA '08)

Link to post
Share on other sites
Posted

 

The code below perfectly centres the logo for me in my Chrome browser. (basically what @N0ps32 said.)

If it doesn't work for you, either your browser is running some custom addons, or you have other CSS rules affecting the layout.

<!DOCTYPE html><html lang="en">	<head>		<meta charset="UTF-8" />		<meta name="description" content=""/>		<meta name="keywords" content=""/>		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">		<title>KraftDinner Test</title>		<style type="text/css">    #container {      width: 1080px;      background: #2e2e2e;      margin: auto;    }    #banner {      text-align: center;    }    </style>	</head><body>		<div id="container">					<div id="banner">      				<figure>					<img src="http://linustechtips.com/main/public/style_images/28_ltt-logo.png" alt="Banner" />				</figure> 							</div>          </div>		<!--# Footer: End -->			<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>		<script>		$(document).ready(function() {				});		</script>	</body></html>

Integrated css

 

dansgame.png

Link to post
Share on other sites
Posted

Tried this before, won't work ;/

try this

#banner {    margin-left: auto;    margin-right: auto;}

Try this, I have the same issue with text-align on some elements in my HTML so I use this simple little fix instead. (I rather dislike directly embedding my CSS into my HTML because it's just ugly and makes the code cluttered)

My procrastination is the bane of my existence.

I make games and stuff in my spare time.

 

 

Link to post
Share on other sites
Posted

Integrated css

 

--SNIP--

 

Only for demonstration purposes. I never used inline CSS on any of my projects because... well, it's just wrong.

But it makes it way simpler to demonstrate code for people on forum boards and such.

 

try this

#banner {    margin-left: auto;    margin-right: auto;}

Try this, I have the same issue with text-align on some elements in my HTML so I use this simple little fix instead. (I rather dislike directly embedding my CSS into my HTML because it's just ugly and makes the code cluttered)

 

This definitely should work too. Define all your margins to be auto, and set a width smaller than your screen width. It always centres, at least for Block elements.

Desktop: KiRaShi-Intel-2022 (i5-12600K, RTX2060) Mobile: OnePlus 5T | [REDACTED] - 50GB US + CAN Data $34/month
Laptop: Lenovo Yoga 7i (16") 82UF0015US (i7-12700H, 16GB/2TB RAM/SSD, A370M GPU) Tablet: Lenovo Tab Plus (256GB)
Camera: Canon M6 Mark II | Canon Rebel T1i (500D) | Canon SX280 Music: Spotify Premium (CIRCA '08)

Link to post
Share on other sites
Posted
  • Author

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Sorry guys I was out of town for the day but it managed to work! I actually just used this and it worked out fine,

#banner {		margin-left: auto;	margin-right: auto;	}

I think there was something else wrong in my code that prevented this from working earlier but as soon as I re-wrote my code out it fixed itself, thanks a lot guys :)

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×