How to format a button on each side of an H3 tag

Question

plan

[button] [h3] [button]

HTML

<span class="glyphicon glyphicon-chevron-left"></span>
<h3>Title may or may not be long enough to break to new line</h3>
<span class="glyphicon glyphicon-chevron-right"></span>

Should it be just right? I keep ending up

[button] [h3]
[button]

or

[button]
[h3]
[button]

Answer 1

Example: http://jsfiddle.net/s9x2kxyz/

There are many ways to do this, but the above fiddle shows one way, which is pretty simple:

HTML:

<span class="glyphicon glyphicon-chevron-left"></span>
<h3>Title may or may not be long enough to break to new line</h3>
<span class="glyphicon glyphicon-chevron-right"></span>

CSS:

h3, span {display:block;float:left;text-align:center;}
h3 {width:80%;margin-top:10px;}
span {width:10%;margin-top:15px;}

Vertical alignment is a part that can become complicated when you don't know how many lines there can be on h3, but what is the nature of the beast in this case ... margin-topin my example, just showing how you can control it a bit ... probably , it will change depending on the font size, etc. Hope this helps you in the right direction.

EDIT: , HTML , , , , , <a> ( <button>), , CSS <a> span. - , - // .

Answer 2

- CSS, "col-xs" , ,

col-xs h3 ,

<span class="glyphicon glyphicon-chevron-left col-xs-2">icon</span>
<h3 class="col-xs-8">Title may or may not be long enough to break to new line</h3>
<span class="col-xs-2 glyphicon glyphicon-chevron-right">icon</span>

Answer 3

padding-left padding, . , . , .

h3 {
    text-align: center;
}
#h3-container {
    position: relative; 
    padding-left: 100px; 
    padding-right: 100px;
}

button {
    position: absolute;
    top: 0;
    width: 90px;
    height: 30px;
}

button.left {
    left: 0;
}

button.right {
    right: 0;
}

<div id="h3-container">
    <button class="left">Button</button>
    <h3>Title may or may not be long enough to break to new line</h3>
    <button class="right">Button</button>
</div>

Answer 4

This can be done as follows:

div{
    position: relative;
}

h3{
    padding: 0 30px;
}

span{
    position: absolute;
    top: 0;
}

span:last-child{
    right: 0;
}

FIDDLE: https://jsfiddle.net/lmgonzalves/znot1r11/3/

Answer 5

here is another solution that will do the trick.

span{
   width:20%;
   float:left;
   text-align:center;
}
h3{
   width:60%;
   float:left;    
   text-align:center;
}

<div>
   <span class="glyphicon glyphicon-chevron-left">icon</span>
<h3>Title may or may not be long enough to break to new line</h3>
   <span class="glyphicon glyphicon-chevron-left">icon</span>
</div>

Run code

Answer 6

Just place the span inside the block level element H3 as follows:

<h1><span class="small glyphicon glyphicon-play-circle" aria-hidden="true"></span> Let play? <span class="small glyphicon glyphicon-play-circle" aria-hidden="true"></span></h1>