CODEWITHSUNDEEP
htmlcss
JasSy
JasSy

Reputation: 401

Align and center two divs and two headers

I have 2 divs and 2 H4 headers which need to be in a line. Tried to align with text-align and float left but it doesn't work.

From my understanding, side by side alignment can be achieved by using float for the elements but it is not happening in my case. Also unable to center them. At present trying to use margin left with a 30% which I believe is not a proper solution. The images below shows how it looks currently and how I am trying to make it look.

HTML

<div class="k-legend-title">
<div class="k-stat-title-color-box" style="background-color: #3DA1ED;"></div>
<h4 class="">Driver 1</h4>
<div class="k-stat-title-color-box" style="background-color: #652D91;"></div>
<h4 class="">Driver 2</h4>

CSS

.k-legend-title{
    color: #C3CF01;
}

.k-stat-title-color-box {
    width: 10px;
    height: 10px;
    border-radius: 25px;
    background: #ccc;
    float: left;
    margin-top: 6px;
    margin-right:5px;
    margin-left: 30%;
}

Current Layout

enter image description here

Trying to get this layout. Center and in 1 line

enter image description here

Upvotes: 2

Views: 1232

Answers (3)

dewd
dewd

Reputation: 4429

Try using display:inline-block with parent using text-align:center:

.k-legend-title {
   text-align:center; 
   color: #C3CF01;
 }

 .k-stat-title-color-box {
    width: 10px;
    height: 10px;
    border-radius: 25px;
    background: #ccc;
    display:inline-block;
    margin-top: 6px;
 }
 h4 {
   display:inline-block;
 }
 .k-legend-title h4:first-of-type {
     margin-right: 10px;
 }

Fiddle: https://jsfiddle.net/kaarccq4/

Upvotes: 0

oboshto
oboshto

Reputation: 3627

By default h1-h6 elements has display: block, you should use display: inline-block in this situation.

h4{
  display: inline-block;
}

h4:first-of-type{
  margin-right: 15px;
}

JSfiddle here

Upvotes: 0

Oriol
Oriol

Reputation: 288020

Make them inline-level, don't use floats. Then you can align them horizontally through text-align on their container, and align them vertically through vertical-align on themselves.

.k-legend-title {
  color: #C3CF01;
  text-align: center;
}
.k-stat-title-color-box, h4 {
  display: inline-block;
  vertical-align: middle;
  margin: 5px 0;
}
.k-stat-title-color-box {
  width: 10px;
  height: 10px;
  border-radius: 25px;
  background: #ccc;
}
<div class="k-legend-title">
  <div class="k-stat-title-color-box" style="background-color: #3DA1ED;"></div>
  <h4>Driver 1</h4>
  <div class="k-stat-title-color-box" style="background-color: #652D91;"></div>
  <h4>Driver 2</h4>
</div>

Upvotes: 2

Related Questions