CODEWITHSUNDEEP
css
user5877383
user5877383

Reputation:

How to center a box that varies width inside a box with fixed width?

I am working on a website: http://felipewarrener.55freehost.com

As you can see there is a content slider, I've added media queries to make the text smaller and the boxes scale in width (I will eventually make the text small enough so that it wont make the boxes bigger than the containter div.

However, I don't know how I can vertically center these boxes? When I scale it down they will need to be vertically centered or else they will just float down.

They are positioned relatively as i felt that was the best option

Could anyone suggest or tell me what method I should use?

Thanks for taking the time to read

Felipe

Upvotes: 0

Views: 43

Answers (2)

bax
bax

Reputation: 119

you can use flex

.container { 
display: flex; 
flex-wrap: wrap; 
justify-content: center;
align-items: center;
align-content: center; 
width: 400px;
height: 400px;
border: 1px solid black;
}
.content {
  width: 200px;
  height: 200px;
  background-color: green;
}
<div class="container">
  <div class="content">
  </div>
</div>

Upvotes: 2

vtange
vtange

Reputation: 649

If you're talking about your "A new dimension to colouring PVC", What you could do is have the header container be relatively positioned, and then give your text this class:

.vert-centered{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Pretty sure your text is floating down to prevent overlap though. You might as well just hide it when the screen width gets too small.

Upvotes: 0

Related Questions