Is there a simple method to center align an inline-block element?
I would prefer not to specify a width for the elements. This way, the inline-block element will adjust its width based on the content inside it, without needing to modify the CSS. The inline-block elements should be centered vertically and horizontally, with their text also centered.
For reference, refer to the code snippet below or view it on jsFiddle.
The current HTML structure:
<div>
<h2>Hello, John Doe.</h2>
<h2>Welcome and have a wonderful day.</h2>
</div>
The current SCSS code:
@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);
}
}
}
One possible solution is to add a line break between the elements and remove the float: left/clear: left properties. However, I'm interested in exploring alternative approaches to achieve the desired outcome.