I want to center the absolutely positioned [h4] tag. The value of the [h4] title is retrieved from the database and it will have a different value each time.
I have tried below stuff.
h4{position: absolute;top:20px;left: 42%;}
It works when the h4 title has around 15 characters. But, it doesn't work if the h4 title has less characters or more than 18 characters. I mean, it works only for particular scenario. is there any flexible solution?
Try with a left: 50%; and transform: translate(-50%, -50%);
https://stackoverflow.com/a/25776315/11401246 for a good explanation on what exactly it is doing.
h4{display: flex; justify-content:center; align-items: center;}
Without using the position property u can center the elements using display flex.
Related
I've been trying to center my YouTube video embed but it just won't work properly.
I've tried flexbox and center tags in html, this is the closest I've gotten, really need some help here
My Code:
CSS
.Video {
display: inline-block;
position: absolute;
padding-left: 15px;
padding-right: 15px;
transform: translate(0,-50%);
}
The issue is your css is wrong. Get rid of the position, display and transform. I'm pretty sure you don't need any of those.
Checkout this jsfiddle I made. I think you're looking for margin: 0 auto;. Make sure the embedded videos are wrapped in a div, then apply the margin. If you already have a margin-top or margin-bottom, then just set margin-left: auto and margin-right: auto;
To use flex-box, this works:
Embed your .video in a .flex-container. Give this .flex-container a width and a height. And add the following properties to the .flex-container: justify-content and align-items set them both to center. Thats it.
Check this codepen. I used joes (above) HTML markup.
Also take a look at the out-commented markup above the codepen.
It's just important that the elements you want to center are direct children of the element the flex property is applied to.
I'm trying to center a child (horizontally and vertically) in its parent in a Grid layout.
I don't want to use tricks like
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
because this does not use the Grid properties and creates problems for animations.
It should be pretty easy but i'm not able to do it...
Can you help me?
https://codesandbox.io/s/qkyv1v8oq6
Thanks
It turned out that the parent in a flex is always a block element (if you do not state differently), so it is ok to assign it: margin: 0 auto;and that's all
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
This is CSS code for centering a button in the viewport. Can somebody explain how this works? I found it somewhere online and it seems to work but I don't get the need for margin-right and transform. Naturally the code doesn't work without them but intuitively I feel the first three should be enough to center the element. I'm relatively new to CSS so I'd understand if this is considered a silly question :)
Take a look at this article: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/. Simply using the first three lines of css (position, top, and left) will center the top left corner of the object, which will make the whole object completely off-center. The negative translation moves the object up and to the right by half of its height and width, respectively, which makes the object centered. In fact, I don't think you even need the margin-right code, but I might be wrong.
I have used the perfect codrops css3 rotating words according to my needs, but I can´t make the appearing words align right in the center. All I need is make the sentence align in center and so the rotating words.
But because it´s position absolute, and floating left, the word starts on left 50% position.
Can anyone help with this? I have tryied a lot of experiments but nothing seems to work.
Here is a jsfiddle: http://jsfiddle.net/nzAPr/
Setting the container to position:relative and the span to 100% seemed to work.
.rw-words{
display: block;
position: relative;
}
.rw-words-1 span{
position: absolute;
width: 100%;
...
}
http://jsfiddle.net/willemvb/9Xubs/
try removing the indent here:
.rw-words{
display: block;
text-indent: 10px;
}
I am not sure if you are still looking for a solution for this.
The animation can only set a centre start point and that's why your words show up shiftet to the right.
You can fix that if you give every child a negative margin and space it out manually.
This is what I got when I was playing around with the code:http://jsfiddle.net/9Xubs/109/ margin-left: -35px;
I would like to do this from my website here: http://project.jazzassite.tk
and be able to place the contents into a div that I can center or do whatever I want with them. The only problem is, If I float it, it doesn't work, and if I use position:relative They create a stair case effect.
I was hoping I would be able to do this purely with CSS, and not use any tables, ect.
Any help appreciated,
Jazza
Are you wanting to center the navigate div which contains all the 6 children? If so, this should work:
#navigate {
position: absolute;
top: 50%;
left: 50%;
margin-left: -540px;
margin-top: -15px;
}
The margin-left is the half the width of the contents and then made negative. The margin-right is half the height of the contents and then made negative. This will vertically and horizontally center your objects. Is this what you're looking for or did I miss the point?