First, remove the float attribute on the inner divs. Then, put text-align: center on the main outer div. And for the inner divs, use display: inline-block. Might also be wise to give them explicit widths too. <div style=”margin: auto 1.5em; display: inline-block;”> <img title=”Nadia Bjorlin” alt=”Nadia Bjorlin” src=”https://stackoverflow.com/questions/1269245/headshot.nadia.png”/> <br/> Nadia Bjorlin </div>
just add position:fixed and it will keep it in view even if you scroll down. see it at http://jsfiddle.net/XEUbc/1/ #mydiv { position:fixed; top: 50%; left: 50%; width:30em; height:18em; margin-top: -9em; /*set to a negative number 1/2 of your height*/ margin-left: -15em; /*set to a negative number 1/2 of your width*/ border: 1px solid #ccc; background-color: … Read more
#doit { background: url(url) no-repeat center; }
Koen’s answer doesn’t exactly center the element. The proper way is to use CSS3 transform property, although it’s not supported in some old browsers. We don’t even need to set a fixed or relative width. .centered { position: fixed; left: 50%; transform: translate(-50%, 0); } .almost-centered { background-color: #eee; position: fixed; width: 40%; text-align: center; … Read more
Set also android:gravity parameter in TextView to center. For testing the effects of different layout parameters I recommend to use different background color for every element, so you can see how your layout changes with parameters like gravity, layout_gravity or others.
Solution as proposed by Aziz would be: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ //your widgets here… ], ) It would not be in the exact center because of padding: padding: EdgeInsets.all(25.0), To make exactly center Column – at least in this case – you would need to remove padding.
For modern browsers When you have that luxury. There’s flexbox too, but that’s not broadly supported at the time of this writing. HTML: <div class=”content”>This works with any content</div> CSS: .content { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } Tinker with it further on Codepen or on JSBin For … Read more
The <center> element was deprecated because it defines the presentation of its contents — it does not describe its contents. One method of centering is to set the margin-left and margin-right properties of the element to auto, and then set the parent element’s text-align property to center. This guarantees that the element will be centered … Read more
You need to set left: 0 and right: 0. This specifies how far to offset the margin edges from the sides of the window. Like ‘top’, but specifies how far a box’s right margin edge is offset to the [left/right] of the [right/left] edge of the box’s containing block. Source: http://www.w3.org/TR/CSS2/visuren.html#position-props Note: The element must … Read more
See my article on understanding vertical alignment. There are multiple techniques to accomplish what you want at the end of the discussion. (Super-short summary: either set the line-height of the child equal to the height of the container, or set positioning on the container and absolutely position the child at top:50% with margin-top:-YYYpx, YYY being … Read more