I am very new to CSS. I have recently created a custom front page of my website, but images are not at aligned to the middle (vertically)
I know it should be very small change but could not figure out how to make this work. Please have a look at my homepage and suggest what should I change.
My homepage here -www.dealschintu.com
What I have already tried:
Tried adding tags
vertical-align: middle;
height: auto;
width: auto;
There are multiple ways of vertically centering elements in css. A quick one that could work (depending on how your document is built up) is the following css snippet:
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
You could also try adding display: table;
To the parent element, and
display: table-cell;
vertical-align: middle;
To the image element.
Related
The plunkr link is https://plnkr.co/edit/mv3lL1vwu2LxoeFZw0TX
I want to position a div at the center of a page (vertically and horizontally). The div has a button which should be at the center of the div. I found a solution in Vertically center in viewport using CSS but it doesn't work for me. Also, I want to create two separate rules, one for vertical alignment and one for horizontal alignment and use them together (or separately) so that I can pick which element should be aligned in which way.
I do not want to use Flex, Bootstrap etc. as I am trying to understand CSS concepts.
the horizontal alignment rule is straightforward.
.center-horizontally-common-styles {
display: block;
margin: auto auto;
}
The vertical alignment rule is (modified from the SO link)
.centre-vertical-common-styles {
position: fixed;
right: 50%;
top: 50%;
transform: translateY(-50%);
transform: translateX(50%);
}
.debug-border-common-styles {
border: 3px solid black;
height:40px;
width:200px;
}
HTML
<div class="debug-border-common-styles centre-vertical-common-styles center-horizontally-common-styles">
<button type="button"> Click Me! </button>
</div>
My understanding is that right: 50%; top: 50%; will use the browser's window (viewport?) as the reference and move the div's top edge and right edge to the location which is 50% mark of the browser's respective edge's location. TranslateY and TranslateX should now move the div upwards (-50%) and towards left(50%) respectively to align the button's center to the middle of the page thus centering the button. The issues I am facing are:
1) The translateY doesn't seem to work. If I change the height of the div to say 200px. the div starts growing downwards (i.e. its top edge seem to be fixed!) It doesn't happen if the width is changed to say 200px.
.debug-border-common-styles {
border: 3px solid black;
height:200px;
width:200px;
}
2) The button inside the div is not at the center of the div. I created the following css rule for the button but translateY doesn't seem to work on this one as well.
.centre-button-vertical-common-styles {
position: absolute; /*use absolute so that the origin is no the parent div*/
right: 50%;
top: 50%;
transform: translateY(-50%);
transform: translateX(50%);
}
3) Ideally, I would like to create two separate rules, say .center-vertical and .center-horizontal and combine them to use the desired effect. But If I do something like follows, it doesn't work. Is it possible to create two separate rules?
.center-horizontally-common-styles {
display: block;
margin: auto auto;
}
Not use right here because horizontal rule should place the item in middle
.centre-button-vertical-common-styles {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Bro, you need few arrows of style. Do like this:)
.centre-vertical-common-styles {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.debug-border-common-styles {
border: 3px solid black;
height:40px;
width:200px;
display:flex;
align-items:center;
justify-content:center;
}
As the question says, I am trying to center a div on the middle of the screen both horizontally/vertically and resize it at the same time.
I do not have any problems on resizing the content when the screen is smaller even to center the wrapper when it is displayed on big screens, the problems comes when I try to resize the screen and, as the wrapper has a max-height property, it does not never vertically center when resize the screen (because it occupy 300px all the time).
I would like that the div that is centered (wrapper) never will be more than 300px and will be always centered (both vertically/horizontally).
Here is my code:
HTML:
<div id="wrapper">
<div id="content">
</div>
</div>
CSS:
html{
width: 100%;
}
body{
width: 100%;
background-color: red;
margin: 0;
}
#wrapper{
position: absolute;
max-width: 300px;
max-height: 300px;
width: 100%;
height: 100%;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
#content{
position: absolute;
width: 100%;
padding-bottom: 100%;
background-color: yellow;
}
JSFiddle.
I tried a lot of configurations and looked a lot of questions here on StackOverflow but any of them worked for me because most of them are only for horizontally/vertically center or resize a div, but not both.
Note: I cannot use flexbox and I would like to maintain as much as possible the actual CSS code, if possible.
How can I avoid to use max-height (that is broken my vertically centering) and get the same behaviour?
EDIT: The div is already centered both vertically/horizontally. What I want is that the square will be always a square and always be centered. I am sorry if I do not put it very clear.
Now the content is being resize as I want (as a square), the problem is only with vertically align at the same time it resizes.
EDIT 2: If you want to see the effect that I refer in the above edit, resize the screen on my example JSFiddle horizontally and you will see the effect.
Thanks in advance!
You can easily do this with CSS3 transform. It depends of the browsers support you want to offer.
I would suggest to place your content absolute at 50% of your wrapper. Then, you can use a negative translate of 50%. top: 50% and left: 50% will place your content top left corner in the middle. Negative translate of 50% (translate(-50%, -50%)) will move your content half of its width to the left and half of its height to the top.
#content{
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You can see your updated jsfiddle
EDIT
I misunderstood a part of your question the first time. But you can easily merge a part of your solution and mine to get what you want.
You just need to replace height: 100%; with padding-bottom: 100%; of my previous answer above:
#content{
position: absolute;
width: 100%;
padding-bottom: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
See this updated jsfiddle.
Maybe I'm missing something(?), but it looks like you can just add height:100%; to your #content css instead of padding-bottom and it works:
https://jsfiddle.net/puajxgsz/
Also, I played with another way to do it without absolutely positioning anything...because, well, it was sort of interesting:
https://jsfiddle.net/j0ch7oxj/
I'm building a website within a CMS. There are quite a few elements that require vertically centered content. However, since I don't have the final content (and whatever content can and will be change in the future) I cannot set a fixed height to those containers.
I just spent a good few minutes trying to figure out why my elements won't vertically align using flexbox...until I found out it's for the lack of a fixed height.
In the past I built such layouts using the display:table/table-cell combination. I started using flexbox models more and more lately and really start to like those and would rather stop using table/table-cell.
Now I wonder how (or if) I could use flexbox to vertically align content no matter what height a container will have.
If your flex container is flex-direction: row (the default orientation), to vertically center content you can use:
align-items: center; /* for a single line of flex items */
align-content: center; /* for multiple lines of flex items */
If your flex container is flex-direction: column, to vertically center content you can use:
justify-content: center;
These methods work without the need to define any heights.
For more details, illustrations, and live demos, see my answer here: https://stackoverflow.com/a/33049198/3597276
From that answer:
Below are two general centering solutions. One for vertically aligned flex items (flex-direction: column) and the other for horizontally aligned flex items (flex-direction: row). In both cases the height of the centered divs can be variable, undefined, unknown, whatever. The height of the centered divs doesn't matter.
May I suggest you use both, like this, as there are still a few IE8/9 users out there and this fallback variant will make it work for them too.
And for other older browser versions that require prefix or use the older flexbox model (like IE10, Safari8/7/6 and some mobile version such as Android, Blackberry, UC Browser), the table version kicks in. More on flexbox support here
html, body {
margin: 0;
height: 100%;
}
.parent {
display: table;
display: flex;
justify-content: center;
/* for this demo */
width: 50%;
height: 50%;
border: 1px solid black;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
display: flex;
align-items: center;
}
<div class="parent">
<div class="child">Centered<br>content</div>
</div>
To vertically center content (or totally centered), you can use CSS transform with translate property. With that method, you don't need to know the size of the element, and combined with a relative parent you achieve a perfect vertical center or horizontal center. See the snippet:
.relative {
position: relative;
width: 400px;
height: 300px;
background-color:yellow;
border: 1px solid black;
margin: 20px 0;
}
.relative .center {
position: absolute;
background-color: black;
color: white;
width: 120px;
height: 150px;
}
.relative .center.vertical {
top: 50%;
-ms-transform: translateY(-50%); /* ie9/ie10 */
-webkit-transform: translateY(-50%); /* safari ios */
transform: translateY(-50%); /* standard */
}
.relative .center.horizontal {
left: 50%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.relative .center.total {
top: 50%;
left:50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="relative">
<div class="center vertical">Vertical center</div>
</div>
<div class="relative">
<div class="center horizontal">Horizontal center</div>
</div>
<div class="relative">
<div class="center total">Total center</div>
</div>
I have two divs inside a container div using display: flex. One div is meant to simply contain text, and center it as closely to the center as possible. The other div contains responsive content (and image in the demo provided) that basically defines the height of the flex.
The first child div, contains layers of divs to emulate a table using display: table and display: table-cell, along with a height: 100% and vertical-align: middle. Before anyone mentions, I can't use an actual <table> due to problems with it supporting position: relative which my actual site utilizes.
In Firefox and Edge, everything loads as expected and works perfectly (or rather as good as Edge can muster). However, in Chrome, the div using display: table refuses to acknowledge it's height: 100%.
Here is a demo of my problem
Using table tags (or display:table) for layouting purposes is wrong. You should only use tables for displaying tabular data.
What you want can be achieved with these mods to your CSS:
.flex-box {
position: relative;
}
.table {
position: absolute;
width: 100%;
height: 100%;
}
.table .table-cell {
display: block;
text-align: center;
top: 50%;
transform: translateY(-50%);
position: relative;
width: 100%;
max-height: 100%;
overflow-x: hidden;
}
The "cell" is now centered both horizontally and vertically. And it gets a vertical scrollbar if the content overflows the box.
Here's the updated fiddle.
I'm still going at my portfolio site and struggling to get minor details correct.
I've got the 9x9 responsive thumbnail images working, with a brightness change on hover, however, now I need to add in the title of each thumbnail selection.
I need the text to appear only on hover, and then be in the centre of each image (each text will be unique to the thumbnail, which is why some of my code looks unnecessarily long).
That is the goal of this gallery, but for now, I really am just trying to figure out how to get the text to move into the centre of each gallery image.
Failing this, I think I may try this with the image set as a background to each div, seems as though it's easier to align the text this way.
.thumb_title{
position: absolute;
color: #FFFFFF;
}
span{
text-align: center;
}
Above, I tried to use absolute positioning to take the text out of normal flow and then centre it to the div, although I'm pretty sure my css principles are incorrect here.
https://jsfiddle.net/205dmxdw/
This should do the it:
.imgContainer {
position: relative;
float: left;
width: 33.3%;
margin: 0px;
text-align: center;
}
.thumb_title {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #FFF;
}