What would be the easiest way to center align an inline-block element?
Ideally, I don't want to set a width to the elements. This way depending on the text inputted within the elements, the inline-block element will expand to the new width without having to change the width within the CSS. The inline-block elements should be centered on top of one another (not side by side), as well as the text within the element.
See code below or see on jsFiddle.
The current HTML:
<div>
<h2>Hello, John Doe.</h2>
<h2>Welcome and have a wonderful day.</h2>
</div>
The current SCSS:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
body {
margin: 0 auto;
background: rgba(51,51,51,1);
font-family: 'Open Sans', sans-serif;
}
div {
width: 100%;
height: auto;
margin: 15% 0;
text-align: center;
h2 {
margin: 0 auto;
padding: 10px;
text-align: center;
float: left;
clear: left;
display: inline-block;
&:first-child {
color: black;
background: rgba(255,255,255,1);
}
&:last-child {
color: white;
background: rgba(117,80,161,1);
}
}
}
Adding a br between the two elements and taking out the float: left/clear: left may be the easiest way; however, I was curious if there was another way going about this.
Like this? http://jsfiddle.net/bcL023ko/3/
Remove the float:left left and add margin: 0 auto to center the element. Or is it something else that your are looking for?
Related
This is my code but I want the text to only have background color behind it, and not stretch across the entire screen? Any ideas?
.section_title {
background-color: orange;
text-align: center;
margin: 0px auto;
}
HTML is
<div class="col-md-12">
<div class="section_title">
<h2>Choose a Pack to Print</h2>
</div>
</div>
An option is adding display: inline-block; to the CSS of the text element.
One problem I found with display: inline-block; is it clears floats incorrectly. Instead, I use width: fit-content;
.highlight {
background: yellow;
padding: 0.5em;
width: fit-content;
}
<h1 class="highlight">Highlight for text only!</h1>
<h1 class="highlight">Highlight me too!</h1>
There's a few ways to do this, but probably the best way is to make the h2 inline or inline-block.
Using inline-block will allow you to set width/height.
.section-title {
text-align: center;
}
.section-title h2 {
display: inline-block;
}
The other way to do this is to set a width on the h2 and set the margin to auto;
.section-title h2 {
margin-left: auto;
margin-right: auto;
width: 50%; /* for example */
}
If you want all your headings to be a set width, I'd choose the second one (allowing for text to wrap). If you want the box to be flexible and hug the contents, I'd use the first.
I came across this behavior recently when a client reported that some of the buttons on a page had vertically centered text while others did not.
As it turns out, buttons will vertically center text inside them but links won't. Example here: http://jsfiddle.net/valentin/7EjtD/
a, button{
height: 200px;
background-color: #ff6400;
color: #fff;
font-weight: bold;
display: inline-block;
vertical-align: top;
border: 0;
padding: 20px;
font-family: sans-serif;
text-decoration: none;
}
Is there any way to add this behavior to links as well outside of using line-height?
Button aligns to the middle because is its default behavior. Your fiddle is aligning top actually. To make it work you can wrap your elements on an display:table element, like a div. Then set the button and the link to be display:table-cell. Then your vertical-align will work. Like this:
<div class="wrapper">
LINK
<button>BUTTON</button>
</div>
And the css:
*{
box-sizing: border-box;
}
div.wrapper {
display:table;
}
a, button{
height: 200px;
background-color: #ff6400;
color: #fff;
font-weight: bold;
display: table-cell;
vertical-align: middle;
border: 0;
padding: 20px;
font-family: sans-serif;
text-decoration: none;
}
Buttons are inline-block elements, while anchors are just inline. You can use padding to achieve the same effect:
a
{
padding: 91px 20px; /* <---(height-fontSize)/2 */
height: auto;
}
JSFiddle
TableData (TD AKA cell) are pretty damn good at default text centering ;)
live demo
a{
display: table-cell;
vertical-align: middle;
}
for clean-code-sake i'd use a special class like:
a.buttonAlike{
Sorry folks! Didn't see he wanted to avoid line-height. Original post:
Add line-height equal to the height of your element. In this case:
line-height: 200px;
DEMO: JSFIDDLE
I have 4 Images, and for some reasons my brain stopped working and i cant figure out why i cant center those.
That's the Fiddle -> http://jsfiddle.net/theminijohn/bcMX5/
If i try to just <center> them i'm getting a Deprecated Html Tag Error in my Editor.
I tried a lot of things, till rewriting the Css and Html Code, but i'm brain stuck here.
Could some Gentleman help brake my blockade ? :)
Here is one way of doing it.
Add a wrapper block element around your div's and then apply the following CSS:
.wrap {
border: 1px solid blue;
overflow: auto;
text-align: center;
}
/* Center 4 Blocks */
.hd_b {
font-size: 13px;
font-weight: normal;
margin-top: 10px;
display: block;
text-decoration: none;
}
._hd {
margin-right: 20px;
display: inline-block;
text-align: center;
}
._hd:last-child {
margin-right: 0;
}
._hd img {
opacity: .85;
}
._hd a:hover img {
opacity: 1;
}
See demo at http://jsfiddle.net/audetwebdesign/QTxy9/
The parent .wrap block has text-align: center, and this will center the child ._hd div's that have display: inline-block.
You need to reset the right margin on the last child div using ._hd:last-child.
This works pretty well if you are willing to use the inline-block display type.
Note that any white space between inline-block elements translate into a 1ex wide space, which may not be obvious when you set the margin between blocks.
All of those divs need to be in one container div that has a fixed width. Then you can apply margin: 0 auto to the container.
http://jsfiddle.net/bcMX5/9/
Try doing this:-
Give a "main" DIV outside all img DIV "<div id="main">"
and give "margin: 0 auto;" along with some width to it.
Please refer the Fiddle: http://jsfiddle.net/aasthatuteja/6U2YJ/
Hope this should solve your issue!
would this be, want you want?
._hd {
margin-right: 20px;
display: block;
width:100%;
text-align: center;
}
Forget about margin and float ;) http://jsfiddle.net/bcMX5/8/
._hd {
//margin-right: 20px;
display: block;
//float: left;
text-align: center;
}
Depends on how you want to center the elements? If it's in a column the above answer would work. Its in a grid then wrap them in a fixed width container.
._hd_container{
width:440px;
margin:0 auto;
}
http://jsfiddle.net/RzfMP/
I currently have this markup:
<h1 class="title" id="page-title">
<span id="page-title-inner">Home</span>
</h1>
And this CSS:
h1#page-title {
background: transparent url(../images/line.png) 0px 6px no-repeat;
overflow: hidden;
}
#page-title-inner {
width: auto;
float: left;
background: #fff;
padding: 0 15px;
position: relative;
left: 45%;
}
This CSS slightly accomplishes what I want given that the page title is short. But if the title is quite long, it fills the space from the center to the right.
What I really want to achieve is to center the page title wrapped inside the span (which is inside the h1 tag) regardless of its width.
I have tried to do something like:
#page-title-inner {
width: auto;
float: left;
background: #fff;
margin: 0 auto;
display: block;
}
where the margin 0 auto value is what would center the span but I wonder why it doesn't work.
Is there a better way and more efficient to achieve what I want to do?
remove float:left & left:45% property of span to make it center. Also set text-align:center for your H1 tag.
Unless you do something special with the span, you dont need it:
<h1 class="title" id="page-title">
Home
</h1>
h1#page-title {
background: transparent url(../images/line.png) 0px 6px no-repeat;
overflow: hidden;
text-align: center;
}
if you do need to do something with the span:
#page-title-inner {
/*width: auto; */
/*float: left; */
background: #fff;
padding: 0 15px;
/*position: relative; */
/* left: 45%; */
}
Float left makes it, well, float left. And the percentage for the left will never work, because the content of the span can be various sizes
You actually dont need to give the span an ID, you can simple do this:
h1#page-title span{ /* ... */ }
Here is what I am trying to do: I have a <h1> element, a <time> element, and a <div>, all within a <header> that is the full width of the browser window. The <h1> element needs to be on the left, the <time> element, which changes width with the time, needs to be centered, and the <div> needs to be on the right.
I have been trying to work this out for a while but haven't had any luck. Perhaps it requires some javascript? I also need to be able to (I think using absolute positioning?) vertically center align them all, and they are all different font sizes.
Heres the HTML so far:
<header>
<h1>blahblah.com</h1>
<time>THE TIME</time>
<div id="controls">
DISPLAY CONTROLS
</div>
</header>
and the CSS:
* {
margin: 0px;
padding: 0px;
}
header {
background: black;
color: white;
width: 100%;
font-family: wendy;
}
header h1 {
display: inline-block;
font-size: 40px;
margin-left: 10px;
}
header time {
font-size: 30px;
}
header #controls {
display: inline-block;
}
#controls p {
display: inline-block;
font-size: 20px;
}
Thank you very much!
Time is an inline element, so text-align: center for the header is enough to get the time centered. Further, get rid of those unnecessary inline-block styles.
And then the base aligning style sheet shrinks to this fiddle example:
header {
width: 100%;
overflow: hidden;
text-align: center;
}
header h1 {
float: left;
}
header #controls {
float: right;
}
Overflow is added to assure extending the height of the header to that of the floated elements , whichever is tallest.