CODEWITHSUNDEEP
htmlcss
karl person
karl person

Reputation: 263

Position div in the middle on the right side of another div

There are three containers A, B and C. I want to get the final position where:

<div id="mainContainer" style="background:red;width:100px;height:100px;margin-top:50px;text-align:right">
  <div id="singleOptions" style=";height:100%;background:black;float:right;margin:auto">
    <div i="myObject" style="width:10px;height:10px;background:blue;" />
  </div>
</div>
</div>

There is the problem with last requirement, how is it possible to position it on the middle (vertically)? I tried to use margin:auto and vertical-align: middle but it doesn't work.

Upvotes: 0

Views: 449

Answers (1)

Billy Jacobson
Billy Jacobson

Reputation: 1703

I think this is what you're looking for. I used flexbox and was able to do this in 2 lines :)

I also tidied up the HTML/CSS. Going forward you want to separate them to make it easier to read and edit.

#mainContainer {
  background: red;
  width: 100px;
  height: 100px;
  margin-top: 50px;
  text-align: right;
}

#singleOptions {
  height: 100%;
  background: black;
  float: right;
  display: flex;
  align-items: center;
}

#myObject {
  width: 10px;
  height: 10px;
  background: blue;
}
<div id="mainContainer">
  <div id="singleOptions">
    <div id="myObject"></div>
  </div>
</div>

Upvotes: 3

Related Questions