How do I center text in a span? - html

Please see this website
How do I get the test TEST to be in the middle of the span it is contained in?
This is using Twitter Bootstrap.
I have tried loads of different ways, like css, inline styling, setting margins, etc but I cannot get the span to do what I need. It appears as though its being drawn to the exact width of it's text.
My main aim is actually to be able to bring the text Nationwide Alerts down so that it is on the same row as the buttons.
The tricky thing is that I cant give this span a hard coded width because of the page being resized
Paul

Just adding that you can now simply use css flexbox to position text inside any element including spans.
The original link is no longer working, but this should center the text horizontally regardless of the size of the element.
span { display: flex;
justify-content: center }
If you want to align vertically, use align-items: center

Put a background color on the span to see why it isn't working. Those three items are in a div with no CSS associated with it. In order for the span to be in the middle, you need the div that surrounds it to, at the very least, have width & text-align properties.
Change
<div>
<button id="btnPrevious" type="button">Previous</button>
<span style="width: 100%;text-align: center">TEST</span>
<button id="btnNext" type="button" style="float: right">Next</button>
</div>
to
<div class="centerTest">
<button id="btnPrevious" type="button">Previous</button>
<span style="width: 100%;text-align: center">TEST</span>
<button id="btnNext" type="button" style="float: right">Next</button>
</div>
with whatever name you want & use
.centerTest {
width:100%;
text-align:center;
}
Additionally, with this markup, your code as is will cause the span to center, but you would have to add float:left to your btnPrevious id. I would refrain, as much as possible, from using inline CSS unless you are designing HTML email, so just create a CSS file that you include LAST in your list of CSS files and add your edits to there.
For example, if btnPrevious is in your template's CSS file, in YOUR CSS file, just add
#btnPrevious {
float:left;
}
and you're good.
EDIT:
Sorry missed the Bootstrap part as I just did a search for TEST inside your code. Bootstrap is built with these classes, and being that those are already inside of a container, you should be able to add text-center to the blank div and it should do the trick
Change
<div>
<button id="btnPrevious" type="button">Previous</button>
<span style="width: 100%;text-align: center">TEST</span>
<button id="btnNext" type="button" style="float: right">Next</button>
</div>
to
<div class="text-center">
<button id="btnPrevious" type="button">Previous</button>
<span style="width: 100%;text-align: center">TEST</span>
<button id="btnNext" type="button" style="float: right">Next</button>
</div>

Spans are, as you suspected, drawn to the exact width of it's text. You can circumvent this by setting it's style to display: block; width: 100%;, or any width you would like. This will mess up everything in your case, since you have other elements before and after the span itself.
Therefor you'll need to in addition set it's position to absolute.

Using bootstrap 2.3.0, there is a .text-center class you can use 3
<span class="text-center">...</span>
and a pagination-centered for bootstrap 3
<span class="pagination-centered">...</span>

You can also use
margin-top: auto;
margin-bottom: auto;
Or if using TailwindCSS my-auto

Related

Placing two divs on the same line with 'inline' not working

I have several buttons contained within divs that I would like to place on the same line. Two of the buttons are only displayed if a certain value is greater than 0. I added display:inline-block in a div container thinking that would place all of the enclosed divs on the same line but it didn't. I also need the buttons to float right (hence the style="float:right in the container div. I've also tried placing display=inline on each of the buttons which didn't work. Here is my HTML:
<div style="display:inline-block" style="float: right;">
<div *ngIf="menu.itemNumber > 0">
<button pButton type="button" label="Download" icon="fa-wrench" iconPos="left" (click)="Download();"></button>
<button pButton type="button" label="Upload" icon="fa-wrench" iconPos="left" (click)="Upload()"></button>
</div>
<button pButton type="button" style="float: right;" label="Delete" icon="fa-wrench" iconPos="left" (click)="Delete()"></button>
</div>
Why aren't the buttons showing up on the same line?
Its because you have a div inside which is block by default. Apply display:inline-block to all elements inside parent button div
Stack Snippet
.main>* {
display: inline-block;
}
<div class="main">
<div>
<button></button>
<button></button>
</div>
<button></button>
</div>
Your inner div (<div *ngIf="menu.itemNumber > 0">) is still a block level element. You need to give it display: inline-block, for it to be inline with the following button.
Also, do not duplicate the style property on your wrapper div. Combine the styles in one string: style="display:inline-block; float: right;" (this is assuming you still want the outer div to be inline-block - it may not need to be).
I also learned that sometimes, depending on the size of the content inside your buttons, or sibling elements, they might not be in the same baseline, meaning some will be higher than others, even if they are side by side. The way to fix baseline issues is to use a special kind of overflow (Like hidden or auto) on the sibling elements
EXAMPLE:
div sibling-elements{
overflow: hidden;
}

Why div element will separate when re sizing even though I have inline-block?

When I shrink the browser + button separated between checkbox event though both div have inline-block
Please see the mini version of the code:
<div style="display: inline-block;">
<a class="plus" data-toggle="collapse" data-target="#data" href="#">
<i class="fa fa-plus-circle"></i><span></span>
</a>
</div>
<div class="checkbox name" style="font-size: 17px; display: inline-block; margin-left: 5px;">
<label>
<input name="unique_id" value="" type="checkbox">
<div id="unique_id">name - address <span class="label label-info">display</span>
</div>
</label>
</div>
But I just want + button and check box will place together when re sizing like this image( without re size )
When using inline-block on your elements they wrap with the parent width. So if you have a parent DIV to your structure juste add white-space: nowrap; to it. It will prevent the children with ìnline-block`to wrap (go under).
EDIT : You could also simplify your HTML structure, you have a lot of elements for a simple thing.
Set the width to both Div or add "float:left" to both div with some width to second div.
white-space: nowrap;
will force the content to stay on one line
Does it fit nicely if you made one of the divs a little shorter?
Reason because even with inline-block, two divs with a width of 50% might not actually fit in one row. There's a little space in between them. Not sure where it comes from; someone here should be able to provide the exact reason why.
But for me personally, what I'll do is wrap the two divs and give that parent div style="font-size:0;". Only caveat with this is that you must explicitly set the font sizes of the children div.
See JSFiddle

Center <span> between two <button>'s

I am working with bootstrap v3 and trying to center a <span class="badge">1</span> between two buttons, one of which uses the pull-right class.
The exact html looks as follows:
<button type="button" class="btn btn-success">Decient</button>
<span class="badge">10</span>
<button type="button" class="pull-right btn btn-danger">Garbage</button>
However this results in the following:
I would like to have the 10 centered but have not been successful. I have tried pagination-centered, text-centerand custom CSS to no avail. Also to provide some additional context, this is in the caption div of a thumbnail.
The following provides a basic scenario of my situation: http://jsfiddle.net/vvA78/1/
It is bootstrap, just use text-center on house-container div and pull-left on btn-success.
JSFiddle
To center vertically just add margin-top.
JSFiddle
Of course do not follow the example and don't set margin-top to the entire .badge class.
.badge is probably an inline element. If you make it an inline-block or a block element, you can center it relative to the parent.
try this:
.badge { display: inline-block; margin: 0 auto; width: 40px; }
If it does not work, I'd need a fiddle or a link.

bootstrap 3 button group in panel-header not centering

I have a button group in a panel-header. I want them floated to the right, but when I do this the buttons are now down at the bottom of the header and I need them to be centered. How do I do this?
here's the HTML:
<div class="panel panel-default">
<div class="panel-heading">
Member of the following Units
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
<button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button>
</div>
</div>
<div class="panel-body">
test
</div>
<div class="panel-footer">
test
</div>
</div>
and a fiddle example: http://jsfiddle.net/snowburnt/4ejuK/
Strangely enough, in my linux dev environment on chromium, the buttons themselves are properly centered but the icons within them are lower than they should be, I have a feeling this will answer both these issues.
You should add the class pull-right to your .btn-group div, instead of specifying float:right.
When you float an element, it loses block layout. It will no longer "push down" the bottom of its container since it doesn't have a height. You can fix this by setting overflow:hidden on your .panel-heading to allow it to resize properly. You will have to add top padding to the .panel-heading and negative top padding to the .btn-group to accomodate the height of the .btn-group.
I forked your fiddle: http://jsfiddle.net/Dq5ge/
You must clear your floats. There are many methods for this like the clearfix hack or using overflow: hidden. Which is what i did in your fiddle. http://jsfiddle.net/4ejuK/2/
.panel-heading {
overflow: hidden;
}
parent elements will collapse if their floated children are not cleared causing a lot of unexpected layout issues.
add
.container{
line-height:2.2;
}
along with what David has suggested above to have the text truly in the center vertically.
check fiddle
I mixed the 2 best solutions in one, for a better fit without changing too much the size or using top negative index:
.panel-heading {
overflow: hidden;
}
and using:
<div class="pull-right">
here you are the example: Jsfiddle example
You can use a trick for that ;)
...
Member of the following Units
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
<button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button>
</div>
<div class="btn btn-primary btn-sm" style="opacity:0.001">I am hidden</div>
...
Good luck - S.M. Mousavi
I solved this issue for myself today. All of the seemingly-working suggestions I found involved setting heights of things in pixels to match the buttons, and that just didn't sit right with me. I wanted the vertical alignment to be independent of the actual height of the panel text itself.
If you look at #ithcy's answer, and jack up the font-size, you have a problem (demo).
The more googling I did, the more I became convinced that CSS's vertical-align was what I wanted, but it never seemed to do what I think it should do. Then I ran across an article by Louis Lazaris that better explained what vertical-align is,
The vertical-align property can be broken down into three
easy-to-understand steps:
It only applies to inline or inline-block elements
It affects the
alignment of the element itself, not its contents (except when applied
to table cells)
When it’s applied to a table cell, the alignment
affects the cell contents, not the cell itself
and more importantly is not:
The common misconception about vertical-align is that, when it’s
applied to an element, it will make all the elements inside that
element change their vertical position.
My solution was to use CSS table formatting (which is what vertical-align is for, after all) instead of the floats that Bootstrap provides with pull-left and pull-right. It takes a little extra markup the way I (naively) did it, but I got the result I wanted:
HTML
<div class="panel-heading table-style">
<span class="panel-title">Member of...</span>
<div class="button-wrap">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove-circle"></span></button>
</div>
</div>
</div>
CSS
.panel-heading.table-style {
display: table;
width: 100%;
}
.panel-heading.table-style .panel-title {
display: table-cell;
vertical-align: middle;
text-align: left;
}
.panel-heading.table-style .button-wrap {
display: table-cell;
vertical-align: middle;
text-align: right;
}
I made a demo of the way I'm using it, which I'm sure can be improved on.
I am very aware that the btn-group has a tendency to wrap with this method, which looks terrible. I just don't have the knowledge or experience to fix it. In my use case, I only need single buttons, not groups, so it's working well enough for me.
It's very late, but I simply solve by this css:
.panel-heading h3,
.panel-heading .btn-group
{
display:inline-block;
}

How to not wrap contents of a div?

I've got a fixed-width div with two buttons in it. If the labels of the buttons are too long, they wrap – one button stays on the first line, and the next button follows underneath it instead of adjacent to it.
How can I force the div to expand so that both buttons are on one line?
Try white-space: nowrap;
Documentation: https://developer.mozilla.org/docs/Web/CSS/white-space
A combination of both float: left; white-space: nowrap; worked for me.
Each of them independently didn't accomplish the desired result.
I don't know the reasoning behind this, but I set my parent container to display:flex and the child containers to display:inline-block and they stayed inline despite the combined width of the children exceeding the parent.
Didn't need to toy with max-width, max-height, white-space, or anything else.
Hope that helps someone.
If you don't care about a minimum width for the div and really just don't want the div to expand across the whole container, you can float it left -- floated divs by default expand to support their contents, like so:
<form>
<div style="float: left; background-color: blue">
<input type="button" name="blah" value="lots and lots of characters"/>
<input type="button" name="blah2" value="some characters"/>
</div>
</form>
If your div has a fixed-width it shouldn't expand, because you've fixed its width. However, modern browsers support a min-width CSS property.
You can emulate the min-width property in old IE browsers by using CSS expressions or by using auto width and having a spacer object in the container. This solution isn't elegant but may do the trick:
<div id="container" style="float: left">
<div id="spacer" style="height: 1px; width: 300px"></div>
<button>Button 1 text</button>
<button>Button 2 text</button>
</div>
Forcing the buttons stay in the same line will make them go beyond the fixed width of the div they are in. If you are okay with that then you can make another div inside the div you already have. The new div in turn will hold the buttons and have the fixed width of however much space the two buttons need to stay in one line.
Here is an example:
<div id="parentDiv" style="width: [less-than-what-buttons-need]px;">
<div id="holdsButtons" style="width: [>=-than-buttons-need]px;">
<button id="button1">1</button>
<button id="button2">2</button>
</div>
</div>
You may want to consider overflow property for the chunk of the content outside of the parentDiv border.
Good luck!