I have a little question about a wordpress plugin which is related to css.
I use on my blog the related posts plugin from Jetpack. It displays 3 articles with wide image and title at the bottom of my posts.
I would like to make the text center horizontally and vertically over my image. As you can see on this post (https://www.ptds.fr/velotaf-guide-de-survie-du-cycliste-urbain/) I managed to get it by playing around with css.
But I'm not happy with this solution as it will not work if the content is too small and the text is not really vertically aligned (just a padding from top).
Thanks in advance.
https://www.ptds.fr/velotaf-guide-de-survie-du-cycliste-urbain/
You'll need to remove some of what you've added, but here you go:
#jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post {
position: relative;
}
#jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 90%;
width: calc( 100% - 30px );
}
Remove these items from your current CSS and replace them with the values above: https://i.imgur.com/kEf3ev4.png
The end result will look like this: https://i.imgur.com/qzGI3sK.png
Edit: I changed the width from 100% because it could lead to the words touching the edge of the image, so I set to 90% for browsers that don't support calc, and added 15px of "safe space" for browsers that do.
Related
I'm really new to programming and trying to customize a theme that I am using. However I am having several issues where if I fix one thing something else breaks. I've researched solutions for about 3 days and I think it's time I reach out to some more experienced with CSS for help.
I tried setting up a JSFiddle but it's not working correctly as I can't access the HTML file directly. The website is www.preethijagadeesh.com. Would it be possible to review the html/css files and provide suggestions for the following requirements?
Center the title (I believe this is found in the 'site_header'
class which is pasted below). I am using margin to change the percentage and it looks
different on various browsers.
I would also like to 'fix' the title so that when I scroll the title
goes with me. I used 'position: fixed' but it cause all the
content in the 'index' ID (pasted below) to overlay on the title/site_header.
The text in the 'About' page appears to be more on the left with
a lot of white space on the right. No matter what I am unable to get
the content to center regardless of which class I update.
The line/border_bottom that appears under the navigation items should be
the same length as the text. I tried updating it but now every time
I hover over the items the text/options move around
overlay a
black color on the thumbnails on hover. I got it to 'kind of' work.
It's just when I hover on the thumbnails, the images and the
'background color' flicker
Widen the gap between the thumbnails.
Right now, there are two columns, it would be great to just put some
space in between them.
Please let me know if there's any other information I can provide.
Change
.header_image {
float: left;
margin-top: 80px;
max-width: 100%;
}
to
.header_image {
text-align: center
margin-top: 80px;
max-width: 100%;
}
Add these to .site_header:
.site_header{
/* old css remains here... */
position: fixed;
top: 0;
left: 0;
right: 0;
}
Move the padding properties from the a to their parent instead (the .page_link div).
and 5. I can't get the thumbnails to display on your jsfiddle so I can't really give the answer. But for 4 I think something like this will help:
put a <div class="thumbnail-overlay"></div> inside your thumbnail html.
For the css:
.thumbnail-overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
/* this z-index should be higher than the thumbnails' child element. If no z-index is set for their child element leave it at 1 */
}
.thumbnail-overlay:hover{
background-color: rgba(0,0,0,0.5);
}
Hopefully this helps.
.header_image is floating, so you can't center it nicely. If you remove the float and then use text-align: center;, the image should center.
Not really sure where you are wanting the title to appear - should it be above the content or to the left of the content?
You have removed the padding from the links to resize the underline, but it's only been changed on hover. This is what is causing the "jumping" navigation links. If you add this code to .navigation a (instead of .navigation a:hover), this should work nicely:
.navigation a {
padding: 0;
margin-right: 6px;
margin-left: 7px;
}
Instead of using .thumb_image:hover, try using .thumbnail:hover .thumb_image and see if that's helps with the flickering. Also, maybe remove the background-position: 0 -30px;.
Is a plugin being used to generate and control the thumbnail images? The absolute positioning being used on the thumbnail images will make it difficult to reposition them.
You should be creating the site offline and reviewing your work before migrating the site to your host.
If your host does not allow you to migrate your site and/or denies you access to your HTML files, you need find a new web host.
I am working on a CSS animated HTML block. I created a fully responsible grid, so these blocks have relative sizes. The block contains a big image to ensure to display the content on all screens correctly. The images in the blocks have 100% width to fit the content, and they also have CSS transitions and transforms.
I would like to center these images vertically, but using only pure CSS. I tried a lot of variations of display, position and vertical-align properties, but no one worked for me. I could easily achieve the proper animation with the background property, but I don't want to create a lot of css classes for all the images (not even with js or jquery).
So could you tell me how to solve this issue with pure CSS? I also created a jsfiddle to demonstrate the problem.
EDIT: I also would like to keep the ratio of the images inside the blocks.
I've created a codepen example of position centrally horizontally and vertically and if you resize it stays in the centre.
http://codepen.io/tom-maton/pen/oqsEJ
In the example I have
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
This makes it h &v positioned centre if you just do
margin: auto 0;
position: absolute;
top: 0;
bottom: 0;
This will position just vertically
Hope this helps
I had a look around and found this link for you:
CSS Tricks - Absolute Center (Vertical & Horizontal) and Image
I hope this can be of some help to you
I have done it on your fiddle too:
Your Fiddle Link
I simply added margin-top: -100px;
EDIT
Sorry didn't realised it wasn't for a fixed size see this updated version:
Fiddle Updated
I used the following code:
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 50%;
margin: -25% 0 0 -25%;
I found it here:
6 Methods For Vertical Centering With CSS
You need to define the height: 100%; as well.
demo
if you define the images with css then it could be as ratio as you wish by setting background-size: cover; but to the image it's not possible.
You can't do what you want both retaining the image ratio and your container DIV smaller than image size, you can even set the height:100% to fit image inside the DIV or set DIV to a bigger size (or use smaller image to fit in the DIV) and use line-height:100%
Here are demo for first solution:
Demo changing the ratio
And demo for second solution:
Demo not changing the ratio
(I also set the text-align:center to make sure it is centered even when you don't use width:100%)
Hope it helps you.
The most dynamic solution (in my opinion) is using translateY.
This will move the element from its current position:
see: CSS3 2D transforms
img {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
I have read the other SO questions related this matter, but I could not find an answer to my issue.
I want to center an image horizontally and vertically in a div having width and height equal to 100%. In other words, if someone resizes the browser window, the image should remain in the center of the window, no matter it's current size.
I have tried to JsFiddle something, but cannot make it work.
How can I make it work? Is it possible? Can someone show an operational example in JsFiddle? Thanks!
You can use position fixed and don't even need a wrapper div (you can add it in though if you like):
img {
position: fixed;
top: 50%;
left: 50%;
margin-top: -16px;
margin-left: -16px;
}
The margins are half the image size (you mentioned it's known).
Here's the fiddle: http://jsfiddle.net/B68c3/2/
Have you tried CSS like this:
background:url(your_image.jpg) no-repeat center center;
I need to build a webpage of just a humble content (a logo and some text) to be show in the center of a browser window. How do I best achieve this effect targeting today web browsers?
Here's a very simple solution. I take no credit for this:
http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm
Works very well for a simple body > div situation like yours.
Your other option, although I fear the repercussions from some table-haters around here, is you could wrap the div in a table, and using the vertical-align:middle property on it to take care of the vertical align without javascript. Then use margin: 0 auto; on the div to handle the horizontal center.
If you know the dimensions of the element (do the math for the values):
position: absolute;
left: 50%;
top: 50%;
width: ($WIDTH)px;
height: ($HEIGHT)px;
margin: (-$HEIGHT/2)px 0 0 (-$WIDTH/2)px;
What it does it positions the top left corner of the element at the center of the viewport and then uses negative margins to inch the center point to the center of the viewport.
you can put your content inside a div and provide height & width to this div then apply this simple css like u applied width as 300px & height as 300px::
div {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
}
then it'll always be in center and make sure u used a valid DOCTYPE.
We have a login page that is designed to have a 200px-high DIV vertically centered in the middle of the page. That is, it creates a 200 pixel blue band left edge to right edge (with form elements in it) that ideally should remain vertically centered in the viewport no matter how the browser window is resized.
This must be a CSS solution.
So let's say here's some sample markup:
<body>
<div id="mainDiv">
<div id="centerDiv" style="height:200px;background-color:blue;color:white">
Center this baby vertically in the #mainDiv, please!
</div>
</div>
</body>
Assume that my CSS dictates that the #mainDiv is stretched to cover the viewport top and bottom, which is easy enough to do. Are there CSS rules that I can apply to any of the elements or the page that will reliably and cross-browser (incl. IE6) vertically center #centerDiv? In a perfect world we should just be able to say
#centerDiv {
margin: auto 0;
}
And even in an OK world we should be able to address this issue with a few styles. But to quote Ving Rhames' character from Pulp Fiction, We're pretty %&#!ing far from OK.
I've looked at the solutions offered in Related Questions and scoured the Web. Nothing I can find really works 100%. Maybe this is unsolvable, but I thought I'd give the collective brains here the problem and see if I can get lucky. Thanks in advance.
If you have a fixed height, you can do it. Give the child div a top of 50% and a margin-top of -100px (or vice-versa) and you should be set.
if height unknown:
http://jsfiddle.net/Limitlessisa/a7xw6b2c/
.centerdiv{
background:red;
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
For true automatic positioning in the center, the inner DIV would need to know the boundaries of the containing DIV. If your container does not have hard boundaries, there is no way for the inner DIV to calculate its own position automatically. It simply has no frame of reference.
The closest I think you can make it with a simple CSS solution is this:
#mainDiv
{
border: 1px dashed #000000;
}
#centerDiv
{
margin: 33% auto;
height: 200px;
}