how to center horizontally div and span elements using css


Tags: html,css,center

Problem :

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.



Solution :

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.


    CSS Howto..

    How to make arrows on both sides of a box using css [duplicate]

    nth-of-type css, how to setup it properly

    How can I completely centre the “feature” section of my layout (please see links)?

    How can I get jQuery or Javascript to change css based on the current url?

    How can i have a background image and lighting that are crossed with lines drawn on it in CSS [closed]

    How to enable real time CSS editing in chrome?

    How to give a line break between buttons in css/html?

    How to target the text in an element but not the text in nested elements with CSS

    Android App with HTML/CSS/jQuery. [How] Can it be done?

    How to change color icon in Materialize?

    Show child elements into parent by changing its class through jquery

    Non-responsive website - Viewport issue - Page showing zoomed in on mobile

    How to let Fancybox Next and Previous button stay visible

    How to preserve styles of embedded widget?

    How to extract class names from a CSS selector?

    How to create specified distance between the end of a line and the baseline of the second line using css

    How I can apply css to part of my jQuery result?

    How to create different and unique ID for some class in css?

    How can I make vertical switch

    How do I center a div between two other divs?

    How to align specific element to the right using :last-child pseudo

    How to use CSS grid framework for custom widths and gutters?

    How to style a button's font in CSS?

    How to make html table made by list responsive?

    xHTML/CSS: How to make inner div get 100% width - margins

    How to link assets which are inside of module in Laravel?

    How to find out DOM and CSS address to an element for Selenium?

    How to create text block over the images with css and make it responsive

    How to vertically align both image and text in a DIV using CSS?

    How can I set a height, or allow a div to extend to the height of absolutely position elements within?