Hello a small problem here that im struggling to fix. Tried vertical-align with no joy and have ran out of ideas.
You can see why frontpage blocks HERE
The title below the picture is sitting towards the top of that area when the title only takes up one line. I was hoping to make it appear in the middle of that area between the picture and the group title below. Could anyone suggest anything?
Thanks
ul.views-fluid-grid-items-center li.views-fluid-grid-item {
background: none repeat scroll 0 0 black;
position: relative;
}
li.views-fluid-grid-item .views-field-title {
padding: 0 4px;
}
As I marked, all the black part in your website are fixed in height, just use display: table-cell along with vertical-align: middle and you are good to go
li.views-fluid-grid-item .views-field-title a {
color: #AAAAAA;
display: table-cell;
height: 40px; /* Fix appropriate height here */
vertical-align: middle;
}
You could add line-height: 37px; to li.views-fluid-grid-item .views-field-title a
but then you would have to cut off the text from going onto two lines..
Edit: I'll leave this on here for reference but I prefer Mr. Alien's answer
Related
I want to center within a square div an arbitrary character. I admit that this sounds like a very simple task, but nothing I've tried works (and I've tried a bazillion things!)1.
For concreteness, let's say that the div has height and width equal to 20ex, and let's say that the single character is the so-called "multiplication sign": ✕, nice and symmetric. I want this character to be positioned inside the 20ex-by-20ex square div such that the point where the two strokes cross is dead-center, both vertically and horizontally, within the div.
EDIT:
I tried the answers I've received so far, here. The solutions given by Jedidiah and by Ashok Kumar Gupta (second and third divs) produce pretty similar results, but (maybe I'm seeing things), the ✕ in the third div is just a hair above the vertical center.
1I have learned that no matter how mind-numbingly straightforward a layout task may appear, it can still take me hours and hours and hours to figure out the CSS to achieve it.
Setting the line-height to the height of the container should do it.
text-align: center;
line-height:20px;
width:20px;
height:20px;
Example here: http://codepen.io/Jedidiah/pen/rLfHz
Use display:table-cell and vertical-align:middle and text-align:center. Like this in your CSS:
#center{
width:100px;height:100px;
display:table-cell;
text-align:center;
vertical-align:middle;
}
The display:table-cell is required to be able to use vertical-align to center content in the on the div ( don't ask me why someone decided to make it like that :) ).
See this JSFiddle.
It is just impossible using css only to center a single character vertically and horizontally in a div because it depends of the font the browser will use to render the character.
For those who just want to center a "X", it is safer to make the "X" transparent, create :before and :after pseudo-elements, give them a thin width and a background that has the same color as the initial "X", then rotate them of + or - 45deg.
HTML code:
<div>X</div>
CSS code:
* {
box-sizing: border-box;
}
div {
font-size: 2em;
position: relative;
border: 1px solid black;
width: 2em;
height: 2em;
color: transparent;
}
div:before,
div:after {
content: "X";
display: block;
z-index: 1;
position: absolute;
top: 0.25em;
bottom: 0.25em;
left: 0.9em;
right: 0.9em;
background-color: black;
}
div:before {
transform: rotate(45deg);
}
div:after {
transform: rotate(-45deg);
}
Here is a jsfiddle: https://jsfiddle.net/z4pmu7r9/
this question is a bit old but it's the first answer when you search "center single letter in square css"
so in 2018 you can simply do
#center {
width: 0;
height: 0
display: flex;
justify-content: center;
align-items: center;
}
justify-content: center align horizontally
align-items: center align vertically
Note that it will works regardless of the shape of the div, could be a rectangle.
This question is a bit old, but after noticing OP's edit:
I tried the answers I've received so far, here. The solutions given by Jedidiah and by Ashok Kumar Gupta (second and third divs) produce pretty similar results, but (maybe I'm seeing things), the ✕ in the third div is just a hair above the vertical center.
I wanted to post that if you used × instead of ✕, the centering looks much better.
https://codepen.io/persianturtle/pen/zPKbRj
Answer to your question:
<div style="width: 20em;height: 20em; background: red;display: table;">
<p style="display: table-cell;text-align: center;vertical-align: middle;">X</p></div>
Note: background: red; is only for visualization.
:)
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've run into an issue where the thumbnail spacing in my image gallery is all over the place and I'm burnt out, lol.
Here are a few example pages of what it's supposed to look like across all pages that contain thumbnails: Good | Good | Good
However, on most of the album pages, they get crunched together, like this page for example: Bad
Then there's this page, where it seems to have completely gone kablooey: Really Bad
I'm sure I'm missing a margin or padding somewhere, but it's eluding me at the moment. Anyone able to sort this out?
thanks!
You should re-write the CSS to have all lis float either left or right with a margin to taste.
This will ensure that all elements will stay within the specified distance of each other and removes the need for positioning and tons of unique IDs when one class will solve the issue.
Don't forget to add a clearing element before you close the div ;)
CSS:
#wrap
{
width: 450px;
margin: 0 auto;
border: 1px dashed #000;
}
.imageHolder
{
float: left;
width: 100px;
margin: 5px;
border: 1px dashed #00f;
}
.clear
{
display: block;
clear: both;
}
http://jsfiddle.net/Kyle_Sevenoaks/a6JGm/
Live demo: http://jsfiddle.net/9Y7Cm/1/
I want the text to be placed at the 50% of the image height - so just in the middle of the box.
I was searching a lot on SO and google - there are a lot of questions like this, but each other is about another problem... I was tried the solutions given by people but none of them worked so thats why I'm asking you here for any solution!
Just set vertical-align: middle on the img.
http://jsfiddle.net/9Y7Cm/2/
replace the following with these:
#column-content {
display: table-cell;
border: 1px solid red;
padding: 10px;
}
img{
vertical-align:middle;
}
it's the image you want to center.
I have a Span tag containing a IMG tag and another Span tag.
I would like the inner Span tag to be aligned to the left and the IMG tag to be centrally aligned plus I want both the tags to be vertically aligned in the middle, and I can't seem to get this right...
This is how it looks (It's blue because the outer Span tag is marked in FireBug to show that it's stretching the entire surface):
As you can see in the image, both tags are centred and they are also aligned in the top of the container, I don't want either of this.
This is the markup:
This is the current CSS of the tags:
.v-button-wrap {
height: 100%;
display: block;
padding: 6px 15px 0 9px;
vertical-align: middle;
line-height: normal;
text-align: center;
}
.v-icon {
margin-left: auto;
margin-right: auto;
vertical-align: middle;
line-height: normal;
text-align: center;
}
.v-button-caption {
text-align: left;
line-height: normal;
vertical-align: middle;
}
I left out the CSS that isn't relevant for my problem, colors, font-specs and such. Needless to say I'm no ace at CSS. And I've looked up several guides covering the problem, but I've only managed to find examples where the entire content of a div is centered, and that's not what I want.
Does anyone with good CSS knowledge see the problem in my code? Or have another solution to solve my problem..?
Thanks!
EDIT: Here's a screen shot of the entire layout due to request. Sorry I have to blur some things... but they are in either case not important. =)
EDIT2: I did manage to solve my problem using the following CSS:
.v-button-details-panel-header .v-button-wrap {
height: 100%;
text-align: inherit;
padding: 0px;
}
.v-button-details-panel-header .v-button-wrap .v-button-caption {
display: table-cell;
position: relative;
text-align: left;
}
.v-button-details-panel-header .v-button-wrap .v-icon {
display: table-cell;
position: relative;
top: 12px;
margin-left: auto;
margin-right: auto;
}
I'm sure the advice dgvid proposed would have been good for a static layout. But since the panels and horizontally stretched buttons move depending on expansion and collapsing that wasn't a fitting solution.
You might need to set the CSS display property of both your img and span.v_button_caption to inline-block.
See also this article: Understanding vertical-align, or "How (Not) To Vertically Center Content"
As for another technique to achieve the desired result: If you know the height of the container element and you know the height of the element to be centered (and unfortunately from the CSS you've posted, it does not appear that you do), then you could
Give the container element CSS property `position: relative'
Give the element-to-be-centered CSS property position: absolute
Set the CSS top property of the element-to-be-centered to (containerHeight / 2) - (centeredEltHeight / 2).