CODEWITHSUNDEEP
htmlcss
B.T
B.T

Reputation: 551

Align divs horizontally to the center

I've got this short code: 

#div1 div {
    margin: 0% 0,5%;
    display: inline-block;
    color: white;
    border: 1px dotted yellow;
    align: center;
}
#div1 {
    margin: 0px auto;
    width: 620px;
    height: 100px;
    background-color: black;
    overflow: hidden;
    text-align: center;
}

#div2, #div10 {
    width: 21px;
    height: 100px;
}

#div3, #div9 {
    width: 60px;
    height: 60px;
}

#div4, #div8 {
    width: 70px;
    height: 70px;
}

#div5, #div7 {
    width: 77px;
    height: 77px;
}

#div6 {
    width: 85px;
    height: 85px;
}
<div id="div1">
    <div id="div2">Content2</div>
    <div id="div3">Content3</div>
    <div id="div4">Content4</div>
    <div id="div5">Content5</div>
    <div id="div6">Content6</div>
    <div id="div7">Content7</div>
    <div id="div8">Content8</div>
    <div id="div9">Content9</div>
    <div id="div10">Content10</div>
</div>

I would like to be able to horizontally align these divs so they are not aligned to the top of my main div but to the center. I tried it many different ways, such as padding, margin, but i wasn't able to figure out how to do it.

Do you have any idea?

Upvotes: 1

Views: 107

Answers (2)

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Just add vertical-align:middle; on the rule above:

CSS

#div1 div {
  margin: 0% 0,5%;
  display: inline-block;
  color: white;
  border: 1px dotted yellow;
  align: center;
  vertical-align: middle;
}

DEMO HERE

Upvotes: 1

Swapnil Motewar
Swapnil Motewar

Reputation: 1088

Hey if you are having some confusion or problem of using vertical-align:middle you can go through below example

I have added a new div inside of div with id div2 to div10 and updated css

   

 #div1 > div {
			display: inline-block;
			align: center;
			margin: 0% 0, 5%;
			position: relative;
			top: 50%;
		}
			#div1 > div[id] > div {
				transform: translateY(-50%);
				color: white;
				border: 1px dotted yellow;
			}
			#div1 {
				margin: 0px auto;
				width: 620px;
				height: 100px;
				background-color: black;
				overflow: hidden;
				text-align: center;
			}

			#div2 > div, #div10 > div {
				width: 21px;
				height: 100px;
			}

			#div3 > div, #div9 > div {
				width: 60px;
				height: 60px;
			}

			#div4 > div, #div8 > div {
				width: 70px;
				height: 70px;
			}

			#div5 > div, #div7 > div {
				width: 77px;
				height: 77px;
			}

			#div6 > div {
				width: 85px;
				height: 85px;
			}
<div id="div1">

			<div id="div2">
				<div>
					Content2
				</div>
			</div>
			<div id="div3">
				<div>
					Content3
				</div>
			</div>
			<div id="div4">
				<div>
					Content4
				</div>
			</div>
			<div id="div5">
				<div>
					Content5
				</div>
			</div>
			<div id="div6">
				<div>
					Content6
				</div>
			</div>
			<div id="div7">
				<div>
					Content7
				</div>
			</div>
			<div id="div8">
				<div>
					Content8
				</div>
			</div>
			<div id="div9">
				<div>
					Content9
				</div>
			</div>
			<div id="div10">
				<div>
					Content10
				</div>
			</div>
		</div>

JSFIDDLE: https://jsfiddle.net/9tdzqvot/

Upvotes: 0

Related Questions