Trying to vertically center the right div

HTML & CSS
1

How would I do the same thing to the right side?

This won’t work on the right side though.

Left is vertically centered here.

.container-left-video {
  margin: 0;
  float: left;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
2

There are several ways to vertical center with CSS.

You really only need to use absolute positioning when something needs to be removed from the normal page flow.

Try these changes and let flex do the aligning for you.

.container-top .header {
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
}

.container-left-video {  
}

.container-right-video {
}

And then further down in your styles remove the 10px side margins here so they don’t conflict with justify-content.

.jacket-left {
  position: relative;
  width: 424px;
  height: 239px;
  cursor: pointer;
  margin: 10px 0;/*this changed*/
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: red;
}

.jacket-right {
  position: relative;
  width: 424px;
  height: 239px;
  cursor: pointer;
  margin: 10px 0; /*this changed*/
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: red;
}

Those two rules are the same so they could have been grouped together.


.jacket-left, .jacket-right {
  position: relative;
  width: 424px;
  height: 239px;
  cursor: pointer;
  margin: 10px 0; /*this changed*/
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: red;
}
3 Likes
3

I was doing it wrong, I think.

This was supposed to be position: relative,
not absolute?

Would that make sense now, for it to be set as relative, and not absolute?

Am I right?

.container-right-video,
.container-left-video {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Full Code

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background: #353198;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.container {
  width: 936px;
  padding: 25px;
  overflow: hidden;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

.container-top .header {
  position: relative;
  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
}

.container-left-video {
  margin: 0;
  float: left;
}

.container-right-video {
  margin: 0;
  float: right;
}


.container-right-video,
.container-left-video {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.jacket-left {
  position: relative;
  width: 424px;
  height: 239px;
  cursor: pointer;
  margin: 10px;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: red;
}

.jacket-left .play {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  fill: transparent;
  border-radius: 25px;
  stroke-width: 5px;
  stroke: #0059dd;
}

.wrap-left {
  position: relative;
  width: 424px;
  height: 239px;
  margin: 10px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrap-left iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 424px;
  height: 239px;
  cursor: pointer;
}

.jacket-right {
  position: relative;
  width: 424px;
  height: 239px;
  cursor: pointer;
  margin: 10px;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: red;
}

.jacket-right .play {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  fill: transparent;
  border-radius: 25px;
  stroke-width: 5px;
  stroke: #0059dd;
}

.wrap-right {
  position: relative;
  width: 424px;
  height: 239px;
  margin: 10px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrap-right iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 424px;
  height: 239px;
  cursor: pointer;
}

.hide {
  display: none;
}




<div class="outer">
  <div class="tcell">
    <div class="container ">
      <div class="container-top">
        <div class="header">
          <div class="container-left-video">
            <div class="jacket-left">
              <svg class="play" width="424" height="239" viewBox="0 0 1000 1000">
                <title>Play</title>
                <path d="M988.1,296.9C959.4,19.2,649.4,23.5,500,157.5C350.6,23.5,40.6,19.2,11.9,296.9C-25.2,654.4,500,931.5,500,931.5S1025.1,654.5,988.1,296.9z M409.3,643V357.1l247.6,143L409.3,643z" />
              </svg>
            </div>
            <div class="wrap-left hide">
              <div class="video" data-id="jMAShwisnQI"></div>
            </div>
          </div>
          <div class="container-right-video">
            <div class="jacket-right">
              <svg class="play" width="424" height="239" viewBox="0 0 1000 1000">
                <title>Play</title>
                <path d="M988.1,296.9C959.4,19.2,649.4,23.5,500,157.5C350.6,23.5,40.6,19.2,11.9,296.9C-25.2,654.4,500,931.5,500,931.5S1025.1,654.5,988.1,296.9z M409.3,643V357.1l247.6,143L409.3,643z" />
              </svg>
            </div>
            <div class="wrap-right hide">
              <div class="video" data-id="kcmWknKtJkk"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
4

Updated response below:

Margin left / right don’t work using flex.
or, I wasn’t able to figure it out.

.jacket-right {
  position: relative;
  margin-right: 10px;
}

.wrap-right {
  position: relative;
  margin-right: 10px;
}


.jacket-right {
  position: relative;
  margin-left: 10px;
}

.wrap-right {
  position: relative;
  margin-left: 10px;
}

Update*

Removed:
justify-content: space-evenly;

Replaced with:
justify-content: space-between;

.container-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
5

This would be grid

.container-top {
  display: grid;
  justify-content: space-between;
  align-items: center;
  grid-template-columns: auto auto;
  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  overflow: hidden;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("") no-repeat 0 0;
}

And this would be table

.container-top {
  display: table;
  height: 310px;
  margin: 0 0 45px 0;
  border-radius: 25px;
  overflow: hidden;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("") no-repeat 0 0;
}

.container-left,
.container-right {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}
6

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