Centering a div on top of an image horizontally and vertically

HTML & CSS
1

Hi,

I am trying to center a div and link both vertically and horizontally on top of an image and I am having trouble doing so.

This is my HTML:

<div class="row  image-header-ae-beauty-row">
		
				<div class="col-4 image-header-ae-beauty ">
					<div class="image-header-ae-beauty-link"><a href="#">Lorum Ipsum</a></div>
					<img src="/wp-content/uploads/2018/10/medical-aesthetic-beauty-image-1.png"  />
					
				</div>
</div>

and this is my CSS:

.image-header-ae-beauty-row{
	
}

.image-header-ae-beauty{
	padding: 0 0 0 0;
	margin-left: -15px;
}

.image-header-ae-beauty img{
	position: relative
}

.image-header-ae-beauty:first-child{
	margin-left: 15px;
}

.image-header-ae-beauty-link{
	position: absolute;
	z-index: 1;
	background: #e1d2d2;
    padding: 20px;
	background: rgb(218, 193, 188); 
    background: rgba(218, 193, 188, 0.9);
	margin:  auto;
    top: 50%;
    transform: translateY(-50%);
}

.image-header-ae-beauty-link a{
	color: rgba(255,255,255,1);
	font-size: 12px;
	line-height: 20px;
	text-decoration: none;
}

.image-header-ae-beauty-link a:hover{
	color: #85705e}

Can anyone tell me how I can get the link the the opaque box to be centered both horizontally and vertically?

Thanks

1 Like
2

I think this is the concept your looking for.


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.caption {
  display: inline-flex; /*shrinkwrap to image native width*/
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.caption img {
  display:block;
  width: 100%;
  height: auto;
}
.caption a {
  position: absolute;
  padding: 20px;
  background: rgba(218, 193, 188, 0.9);
  color: #fff;
  text-decoration: none;
}
.caption a:hover{
  color: #85705e;
}

</style>

</head>
<body>

<div class="caption">
  <img src="https://placeimg.com/500/400/any" alt="missing image">
  <a href="#">Lorum Ipsum</a>
</div>

</body>
</html>
3 Likes
3

Thank you very much :slight_smile: It worked!

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.