How to center the contents of 2 floating divs

Question

I want to center the text and image of the floating divs with respect to its parent div. After trying various margin options, transform, block type, I am still stuck with no result.

.main-div {
  height: 15rem;
  background: #00c6ff;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #0072ff, #00c6ff);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #0072ff, #00c6ff);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.text-div a {
  font-size: 2rem;
  color: white;
}

.text-div {
  float: left;
  width: 70%;
}

.image-div {
  float: right;
  width: 30%;
}

.cleared {
  clear: both;
}

@media screen and (max-width: 400px) {
  .image-div {
    float: none;
    width: auto;
  }
}

<div class="main-div">
  <div class="text-div">
    <h3><a href="https://stackoverflow.com/">1. Trying to center the text and image</a></h3>
  </div>
  <div class="image-div">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzE2VnttSwJdsIARy0aq-wdVfV-ajManGwb3qwpCprqRBtd_Mv" /> </div>
  <div class="cleared"></div>
</div>

Any changes I make to the .text-div, the .image-div either overflows or shifts down. Few cases they overlap too.

Answer 1

I've found a following work-around, but it doesn't use floating:

.main-div{
  height: 15rem;
  background: #00c6ff;
  background: -webkit-linear-gradient(to right, #0072ff, #00c6ff);
  background: linear-gradient(to right, #0072ff, #00c6ff);
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.text-div{
  width: 70%;
}

.text-div a {
  font-size: 2rem;
  color: white;
}

.image-div{
  width: 30%;
}

@media screen and (max-width: 400px) {
  .main-div{
    display: grid;
    justify-items: center;
    align-items: center;
  }
}

<div class="main-div">
  <div class="text-div">
    <h3><a href="https://stackoverflow.com/">1. Trying to center the text and image</a></h3>
  </div>
  <div class="image-div">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzE2VnttSwJdsIARy0aq-wdVfV-ajManGwb3qwpCprqRBtd_Mv" /> </div>
</div>

I've also added media query which will center the content on small devices.

Also, You should consider using responsive images, or else image(or content) will overlap. You can make the image responsive with:

.image-div img{
  width: 100%;
  height: auto;
}

Answer 2

.text-div {
width: 70%;
margin-left:15%;
margin-right:15%;
}
.image-div {
width: 30%;
margin-left:35%;
margin-right:35%;
}

By setting these margins the left and right margin will make the div center without the need to use floats

Answer 3

You can use CSS flex for that.

.main-div {
  height: 15rem;
  background: #00c6ff;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #0072ff, #00c6ff);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #0072ff, #00c6ff);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
  display: flex;
  flex-direction: column;
  
  /* Horizontal align when flex-direction is column */
  align-items: center;
  
  /* Align vertically as well if needed */
  justify-content: center;
  
  /* Or put some space between the contents */
  /* justify-content: space-between; */
  /* justify-content: space-around; */
  
  /* Remove the next line if you don't want main-div to be full-width */
  width: 100%;
}

.text-div a {
  font-size: 2rem;
  color: white;
}

.text-div {

  /* Div is bigger than it's content, if you want it
   * to look centered you need to center content as well
   */
  text-align: center;

  float: left;
  width: 70%;
}

.image-div {

  /* Div is bigger than it's content, if you want it
   * to look centered you need to center content as well
   */
  text-align: center;

  float: right;
  width: 30%;
}

.cleared {
  clear: both;
}

@media screen and (max-width: 400px) {
  .image-div {
    float: none;
    width: auto;
  }
}

<div class="main-div">
  <div class="text-div">
    <h3><a href="https://stackoverflow.com/">1. Trying to center the text and image</a></h3>
  </div>
  <div class="image-div">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzE2VnttSwJdsIARy0aq-wdVfV-ajManGwb3qwpCprqRBtd_Mv" /> </div>
  <div class="cleared"></div>
</div>

You can find more details on the MDN CSS Flexible Box Layout page, and CSS tricks has a good tutorial in this page.

Answer 4

div{
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

You can use this CSS to set the div in the center as a position