How to Align Spans or Divs Horizontally

How do I align spans or divs horizontally?

You can use divs with the float: left; attribute which will make them appear horizontally next to each other, but then you may need to use clearing on the following elements to make sure they don't overlap.

How can I horizontally align 2 spans in the same line?

You need to set the first spans margin-left to 48%. Or if you want to be precise, margin-left: calc(50% - x), where x is half of the width of the first span.

fiddle

Note: the gradient is there just to show you where the center is :)

.center { margin-left: calc(50% - 26px) }

How do I horizontally center a span element inside a div

One option is to give the <a> a display of inline-block and then apply text-align: center; on the containing block (remove the float as well):

div { 
    background: red;
    overflow: hidden; 
    text-align: center;
}

span a {
    background: #222;
    color: #fff;
    display: inline-block;
    /* float:left;  remove */
    margin: 10px 10px 0 0;
    padding: 5px 10px
}

http://jsfiddle.net/Adrift/cePe3/

How can I horizontally align my divs?

To achieve what you are trying to do:

Consider using display: inline-block instead of float.

How to align SPAN inside a DIV vertically and horizontally

I have created a JSFiddle Which could be what you want

<div id="slideClick">
    <div>
        <span class="sideMsg">MESSAGES</span>
    </div>
</div>

I have created a JSFiddle Which could be what you want

<div id="slideClick">
    <div>
        <span class="sideMsg">MESSAGES</span>
    </div>
</div>


.sideMsg
{
        color:#333;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space:nowrap;
    display:inline-block;
    bottom:0;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
    font-size:14px;
    font-weight:normal;
    text-shadow: 0px 0px 1px #333;
    border: 1px solid red;
}

#slideClick {
    float:left;
    height:190px;
    width:200px;
    background:#EE8D40;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

How to center a span in a div

Here is a JSFiddle with the solution and I'll explain some keys of how to achieve it:

1) I use flexbox

#field {
  /* I skip properties that do not change */
  display: flex;
  justify-content: center; /* here we just put the only child div to the center */
}

I changed #defendLine to .defendLineSE just to make sure that it's not overriden elsewhere. (that's why your code could not work - just change that back)

.defendLineSE {
  width: 400px;
  display: flex;
  justify-content: space-between;
}

2) Note that we need to have width. This width is a sum of #defendie-s width and spaces between them (justify-content: space-between;)

3) I removed all position: absolute in your #defendie because they destroy our flexbox (you don't need to use left: 387px; as well)

tip1: I believe you will find usefull this flexbox-cheatsheet

tip2: Since we use justify-content: space-between; you may not need such classes like .firstColumn and others

tip3: change #defendLine to .anyLine, remove width: 400px;, add margin to your .defendie-s - you'll have universal solution for any line with any number of players

How to horizontally center align a span inside a div

You will need to make the span display: inline-block; and make the div text-align: center; or make the span display: inline-block; and margin: 0 auto;

Align horizontally two spans in the middle of a flexbox

I don't think you need to use flex to achieve this effect.

What I've done is removed the flex, set the spans to have 50% width, then set the text-align property to right for the first span.

.MemberLinks {  margin-top: 1em;}
.MemberLinks span {  display: inline-block;  width: 50%;  padding: 0 0.1em;  box-sizing: border-box;}
.MemberLinks span:first-of-type {  text-align: right;}

<div class="MemberLinks">  <div>    <span class="linkTitle">Schedule of Benefits</span><span>          <a href="./manifest.json">            manifestdoc.pdf          </a>        </span>  </div>  <div>    <span class="linkTitle">General Exclusions</span><span>          <a href="./manifest.json">            otherdoc.pdf          </a>        </span>  </div></div>

<div class="title">
  <span class="name">Cumulative performance</span>
  <span class="date">20/02/2011</span>
</div>

.title .date { float:right }
.title .name { float:left }