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.
Related
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;
}
I am trying to edit a page to use the full width of the page. I am having problems setting out the div layout. There is a div there already
<div id="rightPanal" style="margin-top: 425px;">
but it has things too far to the right and it is a narrow column going down the middle of the page.
I deleting/editing/ a lot of div's already there and I end up with nothing and its all over the place on different broswers.
Can I go to the .css file and just write some css that would give me a box in the middle (where inside i can put in two columns) of the page that doesn't interfere with other div and layout on the screen - say start X and Y on the screen - 4 pictures of equal size and text underneath the four boxes - all square ?
Position: absolute
#rightPanal {
position: absolute;
top: 50%;
}
It sounds like you want absolute positioning:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
This code should get you close:
#rightPanal {
position: absolute;
top: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
box-sizing: border-box;
}
I have this layout:
Code here: http://m6000225.ferozo.com/test/
I need the blue and brown image to lay below the main content div, and both be aligned regardless of the window width, both centered horizontally.
I implemented a css tip I read on this site, which is having a div with absolute position and left: 50% and an img inside with relative position and left: -50%.
It works fine, except for the fact that it pushes the page width to the right, as you can see in the screenshot, the scrollbar can be seen.
3rd party lib solutions like jQuery are welcome, but I'd prefer plain CSS.
PS: I also need something similar below the footer, but I guess using the same solution with a negative bottom value should work, right?
PS2: Extending the blue-brown strip to both borders of the window is no problem as I already used another div with absolute position and background-repeat: repeat-x.
The scroll bar is appearing because of the left: 50%; on the class .header-image. You should drop that altogether. Since that tag has a width set, when you push it over 50% it falls outside the window forcing the scroll bar to appear.
After you drop the left call, you should then set the width of that div to the width of the window, not a specific value in pixels. Use Width: 100%. So, that tag should look like:
.header-image {
height: 245px;
position: absolute;
top: 40px;
width: 100%;
z-index: -1;
}
After that, you'll need to re-center the image contained within the div. To do that, instead of using positions (which rely on set boundaries), give the element auto margins. Use :
.header-image img {
display: block;
margin-left: auto;
margin-right: auto;
}
That will recenter the image. Please let me know if this is what you were looking for!
Per Paulie_D's suggestion:
.header-image {
position:absolute;
z-index: -1;
top: 40px;
width: 100%;
height: 245px;
background-image: url('header.png');
background-position: center;
background-repeat: no-repeat;
}
That did it.
I'm currently having issues with some CSS/HTML code.
http://codepen.io/anon/pen/bgHGn
I've got the background of the page in a div (feature-bg) this is to fill the entire page. The content then scrolls up from the bottom but that's irrelevant.
I'm having issues trying to get the largeheader to be displayed in the middle of the page (regardless of resolution/window size) and stick to the background so that when the user scrolls, the content covers it?
I'm not sure if that makes any sense or is even possible.
Thanks!
you want to set the text-alignment property to center
.largeheader{
position: fixed;
margin: 0 auto;
font-size: 100px;
z-index:2;
text-align: center;
top: 50%;
left: 50%;
}
The core issue being this isn't exactly in the center of the page,so as #RCorrie put in his answer, you can make a set width and height to the div and then fix the margin with some simple math. Now if you wanted to jump into using javascript and jQuery thats a whole other ball game and you can definitely do this with minimal work and you wouldn't have to keep changing the div size and margin for each web page that is created.
See the CSS code for the solution:
http://codepen.io/anon/pen/GqeBa
.largeheader {
position: fixed;
top: 50%;
left: 50%;
height: 100px;
width: 250px;
margin: -50px 0 0 -112px;
font-size: 100px;
z-index: 2;
}
Fixed positioning allows the element to stay put while you scroll the page.
To get the large header horizontally centered you can use text-align: center; as #metsales suggested.
In order to vertically center the large header there are a few different options you can use. For this case, since you want the large header to stick in the center of the page, I would suggest using the "Absolute Positioning and Negative Margin" method in the linked article.
You'll end up with something like this:
.largeheader {
line-height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
left: 0px;
}
To put the header behind other content when the user scrolls you'll want to play with its z-index property. I can't suggest anything because I don't know the rest of your markup, but you'll probably want a negative value, and the MDN has a decent article on it.
Hey guys I simply cannot get this to work.
I have some content that is centred on the page using the margin: auto; "trick".
In this content I have an image. I need to make a color bar coming under the image continuing out to the sides of the browser. On the right side I need it to look like its coming up onto the image.
I have made this picture to try an graphically show what I mean: image
As you can see the bar runs from the left to the right side of the browser. The centred image is just placed on top of it and then an image positioned on the top of the image. But I haven't been able to get this working. Any one who would give it a go?
I tried positioning the bar relative and z-index low. This worked but the bar keep jumping around in IE 7-8-9. Centring the image wasn't easy either and placing that smaller image on top was even harder. It wouldn't follow the browser if you resized it. The problem here is that the user have to be able to upload a new picture so I cant just make a static image.
Please help I am really lost here
EDIT:
Tried the example below but when I run the site in IE 7-8-9 I have different results. link
I have made a jsFiddle which should work in Chrome and IE7-9: http://jsfiddle.net/7gaE9/
HTML
<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>
CSS
#container{
width: 100%;
margin: 0 auto;
background-color: red;
text-align: center;
position: relative;
}
#bar1{
background-color: blue;
position: absolute;
top: 50%;
right: 0;
z-index: 1;
height: 30px;
width: 40%;
}
#bar2{
background-color: blue;
top: 50%;
left: 0;
z-index: 3;
height: 30px;
width: 40%;
position: absolute;
}
img{
text-align: center;
z-index: 2;
position: relative;
}
The key here is that the container is positioned relative, thus enabling absolute positioning of the child elements in relation to their parent. Use z-index to control how the elements are stacked.
A method I use for centering anything with css is:
.yourclass {
width:500px;
position:absolute;
margin-left:50%;
left:-250px;
}
'left' must be have of your width and then make it negative.
To date I have not experienced any problems with this.