All geek questions in one place

Alignment of the integrated block center

What would be the easiest way to center the alignment of an element in an inline block?

Ideally, I do not want to set the width for the elements. Thus, depending on the text entered inside the elements, the inline block element will expand to a new width without having to change the width in CSS. Elements of the embedded block should be centered on top of each other (not side by side), as well as the text inside the element.

See the code below or look at jsFiddle .

Current HTML:

<div> <h2>Hello, John Doe.</h2> <h2>Welcome and have a wonderful day.</h2> </div>

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 br between two elements and extracting float: left / clear: left may be the easiest way; however, I was curious if there was another way around this.

+6
source share
1 answer

Like this? http://jsfiddle.net/bcL023ko/3/ Remove float:left left and add margin: 0 auto to center the element. Or is it something else that you are looking for?

+8
source

Source: https://habr.com/ru/post/977483/

More articles:


All Articles