TuckRollworthy TuckRollworthy - 5 months ago 10
HTML Question

I can't get my CSS block to position correctly

I have created this CS block, its a bit messy.

div.OSDCScreen .block_center {
align-content: center;
border: 3px solid green;
background-image: url('../Images/OSDCBack.jpg');
background-repeat: no-repeat;
width: 595px;
height: 836px;
overflow: hidden;
}


but the part I'm struggling with is. I want to dictate the
width
and the
height
of the block and have it sit centrally on the page.

align-content: center;


works and so does

width: 595px;
height: 836px;


But when I use the together
align content
stops working and the block sites on the left of the screen like there is no position set.

Any tips of a someone new to this lark?

Answer

set your margin to auto that should center it.

div.OSDCScreen .block_center {
  align-content: center;
  border: 3px solid green;
  background-image: url('../Images/OSDCBack.jpg');
  background-repeat: no-repeat;
  width: 595px;
  height: 836px;
  overflow: hidden;
  margin 10px auto;
}