Good evening,
I have this blog: http://bloganacastro.com/ where I have below the logo some last posts. It's almost done. I just can't figure out how to center the text exactly in the middle no matter how many characters have in it. For example, this blog: sempreglamour.com.br works exactly as I want. I already tried to copy some CSS from this blog but won't work too.
EDIT:
Print Screen with the difference about these two blogs http://imageshack.com/a/img661/7620/kr6Ov7.png
As you can see, the image from the right have all exactly perfect padding/margin and no matter the size of the text it always fill exactly. In the example from the left, depending on the size of the text it doesn't fill and it's never really centralized.
I got your problem fixed by just adding position: absolute on the <h3>, so try it out.
.caption-text h3 {
position: absolute;
}
UPDATE:
.caption {
width: 100%;
height: 100%;
}
.caption-text h3 {
margin-top: 0;
margin-left: 0;
position: absolute;
width: 100%;
height: 100%;
}
.caption-text a {
position: absolute;
display: block;
top: 50%;
transform: translateY(-50%);
}
and the last thing to remove the existing padding you've applied on .caption-text h3
Now I'm going to tell you that the main thing to vertically align the text in middle was set on .caption-text a, you'll see transfrom and top, those do the vertical centering. Now no matter whatever the length of the text, it will be in center. The width and height on other elements were necessary so that they expand fully inside the li and then the centering can happen easily.
If you are talking about centering text horizontally, this should do it:
.class {
text-align: center;
}
Related
Website: https://bucksfoodpartnership.org/
So on my desktop the text over the top image "Buckinghamshire Food Partnership believe that everyone is entitled to a Right to Food" and the button "Get involved" are aligned to left with 10% margin. However on smaller screen the text is centered (as it should be), but the button is aligned to the far left. How can I make it centered as well (not all the time, only when the text above is centered)?
I think this class makes it aligned to left:
.content-caption {
max-width: 100%;
left: 0;
position: relative;
text-align: center;
but adding
position: relative;
left: 50%;
transform: translateX(-50%);
or
margin: auto;
Doesn't help really. Am I barking at the wrong tree here?
All you need to do is set wp-block-button to width:100%.
.wp-block-button{
width:100%;
}
Because of all the inherited styles and the way inline-block behaves with text-align:center this will work for you. Even across your breakpoints.
I've gone through CSS validation (which did find some pesky unclosed tags, sorted now).
I'm trying to align an image to the top right side of my page, with title text on the top left.
I can do this, but when I resize the browser window the image always wants to overlap the title text before either of them resize. If I remove the margins that I've used to place the image then the image sits under the title text (and to the right) instead of just to the right of it, but I feel removing this (while keeping the positioning) might be key. I do need the image to be overlapped by some other elements though.
Here's a snippet of my code for the image:
img#site-logo {
max-width: 100%;
height: auto;
clear: both;
position: relative;
z-index: 0;
margin: -12.87em 2em -16em 0px;
}
And for the site title:
#site-title a {
font-size: 4.875em;
font-weight: bold;
line-height: 78px;
padding: 0px;
margin-right: auto;
white-space: nowrap;
z-index: 2;
position: relative;
}
Site is live here:
http://dominicpalma.com/
There are surely several different approaches to solve your problem.
But in my eyes it would be the best solution to set a min-width for your #page element.
#page{
min-width:900px;
}
I have played a little bit around with the width and think a min-width of 900 px fits best in your case.
I think this is a different question from other "autofit"-related questions.
I have single-line text label that I'd like to auto-fit to always be half the screen width (dynamically during and after resize, etc.) as well as centered on the page vertically and horizontally. I've tried the jQuery FitText plugin, but it does not seem to work well with vertical centering (shifts up or down depending on the font size, sometimes below the viewport)
It may be due to my use of absolute positioning, but I can't find any alternate way to accomplish this.
My CSS:
h1 {
position: absolute;
top: 25%;
right: 25%;
left: 25%;
bottom: 25%;
display: table-cell;
vertical-align: middle;
}
This JSFiddle shows the block I would like to fill: http://jsfiddle.net/KFySS/6/
Edit: I've added a fake background image text to the fiddle above, which behaves very closely to what I'd like the real size behave to be.
I want the short text to fill the block outlined with dashed line. It should also be centered vertically and/or horizontally. This bounding box is just for illustration, but it was my starting point when using the Fittext plugin.
I found a solution that uses the new CSS3 vw, vh, and vmin font sizing units, which sizes fonts relative to the current viewport.
<div>
<h1>Hi!</h1>
</div>
div {
text-align: center;
}
h1 {
font-size: 50vmin;
position: absolute;
top: 50%;
margin-top: -25vmin;
width: 100%;
}
Here is an example for newer webkit browsers:
http://jsfiddle.net/uTykf/
The vertical centering approach I used seems a bit ugly, but best I could do. Happy to hear if there's a better approach.
I think this is what you want.
h1 {
padding: 10%;
text-align: center;
border: 4px dashed red;
margin: 25%;
}
Check out the link below:
http://jsfiddle.net/GLEcd/2/
I have a square div of fixed size and wish to place an arbitrary size image inside so that it is centred both horizontally and vertically, using CSS. Horizontally is easy:
.container { text-align: center }
For the vertical, the common solution is:
.container {
height: 50px;
line-height: 50px;
}
img {
vertical-align: middle;
}
But this is not perfect, depending on the font size, the image will be around 2-4px too far down.
To my understanding, this is because the "middle" used for vertical-align is not really the middle, but a particular position on the font that is close to the middle. A (slightly hacky) workaround would be:
container {
font-size: 0;
}
and this works in Chrome and IE7, but not IE8. We are hoping to make all font lines the same point, in the middle, but it seems to be hit-and-miss depending on the browser and, probably, the font used.
The only solution I can think of is to hack the line-height, making it slightly shorter, to make the image appear in the right location, but it seems extremely fragile. Is there a better solution?
See a demo of all three solutions here:
http://jsfiddle.net/usvrj/3/
Those without IE8 may find this screenshot useful:
If css3 is an option, then flexbox does a good job at vertical and horizontal aligning:
UPDATED FIDDLE
.container {
display:flex;
align-items: center; /* align vertical */
justify-content: center; /* align horizontal */
}
How about using your image as a background? This way you could center it consistently everywhere. Something along these lines:
margin:5px;
padding:0;
background:url(http://dummyimage.com/50) no-repeat center center red;
height:60px;
width:60px;
This is REALLY hacky, but it is what we used to do in the ie6 days.
.container {
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
margin-top: -12px; // half of whatever the image's height is, assuming 24px
margin-left: -12px; // half of whatever the image's width is, assuming 24px
}
I may be missing something in this example, but you get the idea.
Have you tried the following:
img {
display: block;
line-height: 0;
}
I usually use this hack, but I haven't really checked it that thoroughly in IE8.
Here is a small JS Fiddle I have made: http://jsfiddle.net/rachit5/Ge4YH/
I believe it matches your requirement.
HTML:
<div>
<img src=""/>
</div>
CSS:
div{height:400px;width:400px;position:relative;border:1px solid #000;}
img{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}
I'm having CSS question on aligning an element vertically.
Please take a look at this URL:
http://leisureonly.com/gravedigger/grow-up [Possibly NSFW]
If you look at the sidebar to the right, at the bottom there's a block with an image saying 'Grave Digger'. I want this block to be aligned at the bottom of the sidebar.
I've tried wrapping it in a div and applying vertical-align: bottom to the grave-digger element, but that doesn't offer the desired results.
What is the correct way of doing this?
Well, beginning with, sidebar_gravedigger is at the bottom of the side_bar, so, the first problem is that the sidebar is that long. If you want that element positioned at the bottom of the container (the parent container of the side_bar), I recommend this:
.sidebar_gravedigger {
position: absolute;
bottom: 20px; /*container padding*/
}
#sidebar {
padding-bottom: 500px; /*when the content is short, gravedigger won't be over the bar content.*/
}
.container{
position: relative;
}
Something like this might help:
.sidebar {
position: relative;
height: 100%;
}
.module {
position: absolute;
bottom: 0;
}