Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 40
  • Last Modified:

What is the better way to center a image in a div?

Hello friends:

After looking for some example, I got this one:

<html>
	<head>
	</head>
	
	<style>
		body  {background-color:white}
		div {background-color:cyan; border: 1px solid black; height:200px; width:200px; display:table-cell; vertical-align:middle; text-align:center}
		
	</style>
	
	<body>
		<div>
			<img src="c:\aguia.jpg" width="50%" height="50%">
		</div>	
	</body>


</html>

Open in new window


is the better way to center ( vertical and horizontal) the image in my div?

Regards
Alex
0
hidrau
Asked:
hidrau
2 Solutions
 
EddieShipmanCommented:
From: https://www.w3.org/Style/Examples/007/center.en.html

div img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

Open in new window

1
 
Snarf0001Commented:
Personally I prefer using flex for vertical alignment.  I've found that having display:table-cell causes unexpected issues with placement on the containing element.  Of course I can't specifically remember any right now.... but I've had problems.
Nothing with flex:

<html>
<head>
    <style>
        body { background-color: white }
        div { background-color: cyan; border: 1px solid black; height: 200px; width: 200px; display: flex; align-items: center; justify-content: center; }
    </style>
</head>
<body>
    <div>
        <img src="c:\aguia.jpg" width="50%" height="50%">
    </div>
</body>
</html>

Open in new window

1
 
hidrauAuthor Commented:
thanks a lot for help
0

Join & Write a Comment

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now