CODEWITHSUNDEEP
htmlcsscenter
pv619
pv619

Reputation: 409

how to center horizontally div and span elements using css

Here's link to JS Fiddle: JS Fiddle

I am trying to get my borders and icon in the center of the page horizontally. With the background color #f30.

But eveything just seems to stay on left side. I tried few articles on here but they didn't seemed to work and also checked Google for more, but nothing seemed to fixed it.

Here's the HTML for your inspection:

<div id ="heading_layout" class="section-1">
<span class="d"><span class="icon"></span></span>
</div>

Here's the CSS for your inspection:

#heading_layout {
 margin-top: 30px;
  width: 100%;
  text-align: center;
  background: #f30;
}

.section-1 span.d:before {
  float: left;
  content: '';
  width: 10%;
  height: 1px;
  border-bottom: 2px dashed #8000ae;
}

.section-1 span.d:after {
  position: relative;
  right: 0px;
  float: left;
  top: 100%;
  content: '';
  width: 10%;
  height: 1px;
  border-bottom: 2px dashed #8000ae;
}

span.icon {
    position: relative;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: -14px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    float: left;
    background: 
    #8000ae url('') 
    3px 3px no-repeat; 
}

Here's link to JS Fiddle: JS Fiddle

Thanks.

Upvotes: 1

Views: 88

Answers (1)

Or Duan
Or Duan

Reputation: 13810

I re-edited your CSS:

#heading_layout {
  margin-top: 30px;
  width: 100%;
  text-align: center;
  background: #f30;
}

.section-1 span.d:before {
  display: inline-block;
  content: '';
  width: 10%;
  height: 1px;
  border-bottom: 2px dashed #8000ae;
  margin-bottom: 12px;
}

.section-1 span.d:after {
  position: relative;
  right: 0px;
  display: inline-block;
  top: 100%;
  content: '';
  width: 10%;
  height: 1px;
  border-bottom: 2px dashed #8000ae;
  margin-bottom: 12px;
}

span.icon {
    position: relative;
    margin-left: 15px;
    margin-right: 15px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    display: inline-block;
    background: 
    #8000ae url('') 
    3px 3px no-repeat; 
    margin-top: 5px;
}

What I did:

  1. Replaced the 'float: left' with 'display: inline-block' - Now the text-align is actually effects them.
  2. Removed unnecessary negetive margins

That all. Hope i was clear.

Upvotes: 1

Related Questions