I want to define a class such that to which ever element I apply that class that element gets horizontally centred in its parent container.
The class can be applied to img , iframes or divs each of which could be of different size.
Is it possible to have such one class for all of them?
And how can achieve this probably the solution would require setting right, left margins automatically equal to each other and according to the size of the elements and left over space? But how that can be achieved.
Closest I have been able to reach is this but it doesn't work:
.centreThis{
margin: 0 auto;
max-height: 964px;
max-width: 680px;
overflow: hidden;
border: 10px solid #ddd;
}
Using a combination of CSS rules to address various elements:
.center {
width:auto;
text-align:center;
margin-left:auto;
margin-right:auto;
position:absolute;
left:50%;
transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
}
This will center align p, img, div and iframe elements, and others. Here's the full demo.
You can use this centered class:
.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
Work for:
<div> tag;
img tag
iframe tag
JSFIDDLE
EDIT: if you put some text right inside <div> with that tag, the text will not center, cause you don't have setted text-align: center property.
HOW CAN I CENTER TEXT INSIDE CENTERED DIV?
Simple, just add a <p> element inside that div and CSS:
.centered p {text-align: center;}
Try using text-align: center; on a container element and display: inline-block; on a child element that you want to center.
Also, note that the margin: 0 auto; method only works when you have a defined width.
Related
newbie here starting with the basics of HTML and CSS. I really have a hard time centering a simple div (a square in my example). I've watched many tutorials as well as read many articles but still cannot really figure out the "best" way to do it. With so many different ways like align-items, align-content, justify-items, justify-content, I get overwhelmed at some point especially with how these behave with different displays (flex, grid, inline-block etc), not to mention the positions of parents and childs. Below is an example that I still can't quite easily manipulate/center. The HTML is only the boilerplate and a blank div with class square inside the body. Thank you all in advance for your tips!
html {
height: 100%;
}
body {
min-height: 100%;
background-color: #162944;
}
.square {
height: 10rem;
width: 10rem;
background-color: salmon;
display: flex;
align-items:center;
justify-items: center;
align-content: center;
justify-content:center;
place-content: center;
place-items: center;
}
The above example has been tried with all possible combinations and NOT only as you see it. Also with display:grid; and others. Is there really not a simple way to center an object on your page?
One way to center a div is to set the width of the element and then use the margin property to set the left and right margins to auto. This will horizontally center the element within its container.
For example:
.element {
width: 400px;
margin-left: auto;
margin-right: auto;
}
You can also by using the text-align property.
.shape {
text-align: center;
}
Also by using the margin property.
For example:
.shape {
margin: 0 auto;
}
Finally, you can center a div when it comes to shapes by using the transform property.
For example:
.shape {
transform: translate(50%, 50%);
}
Centering a div can be easy or hard based on your layout options and what you want to achieve.
The simplest way to horizontally center a div, add a width and margin: 0 auto.
Simplest way to horizontally and vertically center a div is using a flexbox, display: flex; justify-content:center; align-items:center. Also you can go with display:table and display:table-cell.
Last option is to use Positioning. You can take a div, style it with position:relative and add a height:300px,width:300px. Then inside the parent div, add a child div and style it with position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:50px; width:50px
https://jsfiddle.net/ahqamm7o/1/
#parent {
text-align: center;
}
.content {
display: inline-block;
text-align: left;
margin: auto;
width: 50%;
}
.menu {
float: left;
text-align: left;
width: 20%
}
I tried using techniques from CSS: center element within a <div> element but this does not seem to apply for DIVs with an 'inline-block' style.
Note 'inline-block' is not a requirement I have, I am just merely looking for the menu to float left and the content to be positioned directly to the side of it (with the content centered relative to 'parent')
I am trying to center 'content' relative to 'parent'
(that is, center 'content' as if 'menu' was not there).
If you specified the limited width then float:left is not needed, apply the text-align:center to the .content class so it will align the content center with in that particular div, if we use position:absolute the parent should be in position:relative.
You had some tag issues: An extra section tag, div tag.
To solve your issue I removed float: left from .menu and added:
position: absolute;
top: 0px;
left: 0px;
This will always position the menu on the left and the primary content will be centered as if the menu is not there.
Fiddle: https://jsfiddle.net/ahqamm7o/2/
It's a very common situation: a designer tells me that some piece of text should be vertically centered, but I can't use the display:table-cell; hack because the containing element needs to have a different display property. I also don't want to have to use any position:absolute due to the problems that presents.
Fiddle: https://jsfiddle.net/z824m656/1/
HTML
<div class="contents-vertically-centerd">
<img src="https://blog.stackoverflow.com/images/wordpress/stackoverflow-logo-300.png" width="150"/><span>Here's some text that I want vertically centered with respect to the image</span>
</div>
CSS
div.contents-vertically-centerd { padding: 10px; border: 1px dashed #000000; }
You need to vertically align the image, not the text.
Have you tried:
div img {
vertical-align: middle;
}
In the kind of situation you describe, it will also assist you if you:
explicitly declare the height of the image
declare the display of the <span> text as inline-block
explicitly declare the height of the <span>
explicitly declare the line-height of the <span>
Here's an updated fiddle using vertical-align: middle;
https://jsfiddle.net/z824m656/2/
div.contents-vertically-centerd * {
vertical-align:middle;
}
You can use vertical-align: middle but keep in mind this only aligns inline (or inline-block content). So it should go like:
div.contents-vertically-centerd img, div.contents-vertically-centerd span {
display: inline-block;
vertical-align: middle;
}
For your special use case, there’s a simple solution: Use vertical-align: middle on the image. It will center the text to the image. Here’s the updated Fiddle.
Another option is the transform: translateY(-50%) method.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
div {
height: 200px;
/* Used to center horizontally */
text-align: center;
}
p {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div>
<p>This text is vertically centered.</p>
</div>
A more detailed write-up here.
I would like to center and clamp the dimensions of a child div inside its parent.
<style type='text/css'>
.parent {
width: 100%;
height: 100%;
}
.child {
max-width: 100%;
max-height: 100%;
}
</style>
<div class="parent">
<div class="child">
<img src='dog.jpg' />
</div>
</div>
Here are the constraints:
The parent div is set to occupy the entire screen (of unknown size), so width:100% and height:100%.
The width and height of the child div are unknown. In one use case, the child div contains an image. In another, it contains a video.
The width and height of the child div must be constrained to the size of the parent, so max-width: 100% and max-height: 100%.
The child div must be vertically and horizontally centered inside the parent.
Ideally, this should work without javascript.
IE can be left unsupported :)
I've tried all the techniques listed in this excellent article, 'Absolute Centering in CSS' , and none of them pan out. Here's why:
Absolute centering: In order for this technique to work with a child of unknown size, you must set display:table on the child. You can then constrain the max-width of the child's contents, but not the max-height, because by CSS 2.1 rules, tables render to fit their contents.
Negative margins: Doesn't allow for variable height.
Transforms: Undesirable because it can result in blurry rendering.
Table-cell: Fails for the same reason that absolute centering fails, i.e. table rendering.
Inline-block: Doesn't work in the important case where the child is 100% width.
Flexbox: Works well until a window resize occurs, at which point you have to force a Webkit redraw to propagate the centering changes. This hack does the job, but it's still a hack. I want to believe there's a more elegant solution to this.
Best solution here is to use :before pseudo element. Check out this article on centering the unknown, http://css-tricks.com/centering-in-the-unknown/
SEE THE DEMO HERE
body,html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
text-align: center;
background: #ccc;
width: 100%;
height: 100%;
}
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.image {
display: inline-block;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
}
You could use display:table and display:table-cell like so Jsfiddle. Though this will just center the image of the child div.
If you need to have a centered div around the image you could always add another div inside of the child div with the style display: inline-block example
I have the following js-fiddle. It's basically just a div that has a bunch of square child elements. The issue is that the div doesn't always stay centered. I've already set the following CSS:
.boutique-grid {
text-align: center;
margin-left: auto;
margin-right: auto;
}
I am not sure why it's not centering the child element div's. Any idea?
Remove float left from your .boutique-grid-column class. It will solve the issue.
The boutique-grid is centered, but it's 100% wide. You can set a width to for example, 710px;
.boutique-grid {
overflow: hidden;
width: 710px;
}
.boutique-grid {
text-align: center;
}
.boutique-grid-column {
...
margin: 0 auto;
}
Remove float:left; and this will work fine, you already have display:inline-block; set so no need to float the element.
http://jsfiddle.net/wy7rd/3/
This is what the spec says about float:
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).
This is why .boutique-grid-column becomes block when float is specified and ignores text-align.
Set width of div and image.
.boutique-grid {
width: 300px;
text-align: center;
margin-left: auto;
margin-right: auto;
}