How to Center a Span in a Div

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 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

Center align span text inside a div

You are giving the span a 100% width resulting in it expanding to the size of the parent. This means you can’t center-align it, as there is no room to move it.

You could give the span a set width, then add the margin:0 auto again. This would center-align it.

.left 
{
   background-color: #999999;
   height: 50px;
   width: 24.5%;
}
span.panelTitleTxt 
{
   display:block;
   width:100px;
   height: 100%;
   margin: 0 auto;
}

Is there a way to make the span go to the center of document

Just add display block:

span {
    text-align:center;
    display:block;
}

Center align a span inside a div with an img element

The answer here is probably to use flexbox. If your flex-direction is row (which is default), you can use align-items to center the elements vertically and justify-content to justify the row to the left (the "start" of the flex container). Let me know if you have any questions!

.element {  align-items: center;  display: flex;  justify-content: flex-start;}
.element img {  height: 40px;  width: 40px;  border-radius: 50%;  margin-right: 20px;}
.element span {  display: inline-block;}

<div class="element">  <img src="https://images.pexels.com/photos/35646/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">  <span>hello</span></div>

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;

Center a span relative to container div, align another span with right-aligned text left of it

Flexbox design / layout

This can be sloved using flex:

Setting tree boxes:
Aside, center and a hidden one, will fill the required space.

Setting a flex-grow will make make them take up different parts of the page.

Setting flex-grow: 1; on each will make them take up equal space.
Setting one of them to flex-grow: 0.5; will give this part less space to grow.

Adding a wrapper with the flex property we can use align-items:center to make sure they stay in the center of the wrapper.

Fiddle

.wrapper {  height: 250px;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;  -webkit-flex-flow: row wrap;  flex-wrap: nowrap;  flex-direction: row;  align-items: center;  text-align: center;}
.center,.aside,.not-shown {  -webkit-flex: 1;  -ms-flex: 1;  flex: 1;}
.center {  flex-grow: 0.5;  background-color: lightblue;  height: 50px;}
.aside {  text-align: right;  background-color: 1;  background: lightgreen;  height: 50px;}
.not-shown {  visibility: hidden;  flex-grow: 1.5;  height: 50px;}

<div class="wrapper">  <div class="aside">    aside  </div>  <div class="center">    center  </div>  <div class="not-shown">  </div></div>