I am trying to make a link which has a height and a width of 200px.
The text of the link shall be centered vertically and horizontally.
This is my CSS so far:
a:link.Kachel {
width: 200px;
height: 200px;
margin: 0 auto;
display: block;
text-align: center;
background: #383838;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
}
and this the HTML-code:
<tr>
<td>
<a class="Kachel" href="#">Test</a>
</td>
</tr>
The text is horizontally centered but not vertically.
Any idea how to get the text centered both horizontally and virtically?
remove everything else, and just replace height with line-height
a:link.Kachel{
width: 200px;
line-height: 200px;
display: block;
text-align: center;
background: #383838;
}
jsfiddle: http://jsfiddle.net/6jSFY/
In CSS3, you can achieve this with a flexbox without any extra elements.
.link {
display: flex;
justify-content: center;
align-items: center;
}
If the text is only on one line, you can use line-height:200px; - where the 200px is the same as the height value.
If the text is on multiple lines and will always be on the same number of multiple lines, you can use padding combined with line-height. Example with 2 lines:
line-height:20px;
padding-top:80px;
This way the two lines will take up a total of 40px and the padding top puts them perfectly in the middle. Note that you'd need to adjust the height accordingly.
JSFiddle example.
If there is more than one link and it will have any number of lines, you will need some accompanying JavaScript to fix the padding on each.
If the number of rows (or the inner element height) is not known, there is another trick using display: table and vertical-align:
.wrapper{
display: table;
}
.link{
display: table-cell;
vertical-align: middle;
}
Example
Full article with details
Small point to add. If you remove the underline (text-decoration: none;) then the text will not be perfectly centred vertically. Links leave space for the underline. To my knowledge there is no way to override this except to add little extra top padding.
Maybe using padding? Like:
padding-top: 50%;
In CSS3, you can try to use line-break with the justify text.
text-align: justify;
line-break: anywhere;
Related
I am struggling centering content vertically. Here is a screenshot:
I need a float left as there will be more content on the side which you can't see but yeah how can I get this text to vertically be in the center? Also I am not sure if I do need a tag in the tag
.newsletter_text_section {
width: 40%;
float: left;
padding: 15px;
font-size:24px;
padding-right: 0 !important;
display: inline-block;
height: 100%;
vertical-align: middle;
}
.newsletter_text_section p {
font-size:24px !important;
display: inline-block;
vertical-align: middle;
}
<!-- newsletter section -->
<div class="newsletter_section">
<div class="newsletter_text_section">
<p>Join Balance and get 20% off your first order</p>
</div>
<div class="newsletter_gif_section">
...
</div>
<div class="newsletter_input_section">
...
</div>
</div>
To solve this, the faster way is to set the same pixel for height and line-height of the element. Like this:
.box{
height : 10vh;
line-height: 10vh
}
Otherwise, you can also display: flex to layout your page, in flex scope, you can use align-item to align element vertically like this :
.box {
display: flex;
align-items: center;
justify-content: center;
}
For more detailed information, you can refer to here.
The next method is to adjust padding to your parent element since you are using the percent unit, but I don't recommend this way due to it exist side-effect sometimes.
The above content is what I think so now, hope it can help you.
Add This To The Style Of The Element:
position: absolute;
top: 50%;
Thanks,
Kamesta
I have this footer at the bottom of my page
enter image description here
Here’s the CSS:
.footer {
position: absolute;
display: flex;
justify-content: flex-start;
align-items: center;
z-index: 10;
top: 625px;
overflow: hidden;
}
.images {
}
So I want that block of text to only exist on the left side of the page, and then a row of images to exist only on the right side. What would be the cleanest way to do this? Might I need bootstrap grid to allow it to properly work? I've tried just doing a margin-left shift but for some reason it adds padding to the bottom of the images, so it increases the height of the page.
Create a parent div containing 2 child divs for the footer-text and footer-images then use flexbox for their alignment and spacing.
If I correctly understand your question -
You could try putting the text that corresponds with certain images in individual divs for example if you wanted to put "Hi There!" With an image of some one waving, try this:
<div>
<h1>Hi There!</h1>
<img src="wavingHand.jpeg">
</div>
Then just repeat that for every single pair up, and add this styling:
h1 {
display: inline;
}
img {
display: inline;
}
You can even add some floats, or position: relative if that isn't the exact effect your looking for
You may be able to use somethng like this:
.image {
float: right;
position: relative;
margin: 10px 15px 15px 10px;
}
.text {
float: left;
}
<div class="footer">
<div class="footer-text">Footer Text</div>
<img src="image.png">
</div>
.footer {
display: flex;
justify-content: space-between;
align-items: center;
}
Since there are only 2 children to the the footer element - text and image, you can use justify-content: space-between to evenly distribute the space between the two thereby placing them to left and right ends.
I have a code - https://codepen.io/anon/pen/MQjpBG
It's a simple list with a colored block and text in each li
I need the list to be vertical and the text and block to be vertically aligned.
I'm trying to do this with flex and align-items but the text and block never center exactly
Am I doing something wrong, is there a better way to do this.
.element{
display: flex;
list-style: none;
&__item{
display: flex;
align-items: center;
margin-right: 10px;
&:last-of-type{
margin-right: 0;
}
&-square{
background: red;
//display: block;
display: inline-block;
height: 20px;
width: 20px;
}
&-text{
font-weight: bold;
}
}
}
I want the block and text to fit like so.
The align-items: center; seems to do it but its slightly off, like
There's nothing centering them (in your codepen).
Add this to your code:
.element{
display: flex;
justify-content: center; /* horizontal alignment */
.element__item {
display: flex; /* nested flex container */
align-items: center; /* vertical alignment */
}
revised codepen
Unfortunately, it looks like the issue is a function of the font chosen. Different fonts will have different descender heights (e.g. the tail of a "g") as well as different positioning of the base line relative to the full text box, and it appears that some fonts will have these values set such that they may not be visually centered.
I modified your CodePen example and forcibly set the font-family of the first element to Arial while leaving the second as the default (on Firefox on macOS 10.15/Catalina), and the Arial version definitely looks much more vertically centered:
You may be able to fix this by changing the font used, but obviously this isn't a change that can be made lightly on a large codebase.
To make the list to be vertical, just add "flex-direction"
display: flex;
list-style: none;
flex-direction: column;
For horizontally center aligned:
.element {
justify-content: center;
}
For vertical center alignment of squares and text:
.element__item-square {
vertical-align: middle;
}
.element__item-text {
vertical-align: middle;
}
I have been searching around, but for the life of me I cannot figure out what's going on. My text is getting wrapped at certain tags, while I want it all on one line.
I have aligned three DIV elements next to each other through the use of display: flex;
This all works out quite nicely and display is exactly the way I want it. Except for the fact that, for some unexplicable reason (at least to me), if I put a text snippet in one of those divs and that text snippet contains something between tags like <span></span> or <b></b>, the text is automatically wrapped before and after the tag onto a new line.
I have the code here:
.pagetitlewrapper {
width: 99%;
background-color: #c1dbff;
border-radius: 25px 25px 0px 0px;
padding: 10px;
display: flex;
text-align: center;
}
.pagetitleleft,.pagetitlecenter,.pagetitleright {
width: 33%;
align-items: stretch;
display: flex;
justify-content: center;
flex-direction: column;
}
.pagetitleleft {
text-align: left;
font-size: 9;
}
.pagetitlecenter {
text-align: center;
}
.pagetitleright {
text-align: right;
font-size: 9;
resize: vertical;
}
<div class='pagetitlewrapper'>
<div class='pagetitleleft'>Welkom, FNAME LNAME</div>
<div class='pagetitlecenter'><h1>Nexus Consult DMS</h1></div>
<div class='pagetitleright'>
Licensed to <span>DON'T WRAP</span> - License valid until xx/xx/xxxx.
</div>
</div>
Around the DON'T WRAP, I have put <span> tags to illustrate the problem. If you remove these tags, the text is all displayed on one line as I want it. Basically I want to be able to make DON'T WRAP bold without it wrapping the text before and after.
I have been searching the web, to no avail. I found a couple of code snippets online which surprisingly did the same thing. I wonder why nobody ran into this problem before?
I have tried to play a bit with white-space: nowrap; in CSS, but that didn't seem to work either.
Anyone has any idea? Someone can point me in the right direction?
Thanks,
Kenneth
Why it break line is because of the display: flex; flex-direction: column on the pagetitleleft/center/right elements, which make the span a flex column item and take 100% width.
By dropping the display: flex on the pagetitleleft/center/right elements and set align-items: center to their parent, their text will center vertically
.pagetitlewrapper {
width: 99%;
background-color: #c1dbff;
border-radius: 25px 25px 0px 0px;
padding: 10px;
display: flex;
align-items: center;
}
.pagetitleleft,.pagetitlecenter,.pagetitleright {
width: 33%;
}
.pagetitleleft {
text-align: left;
font-size: 9;
}
.pagetitlecenter {
text-align: center;
}
.pagetitleright {
text-align: right;
font-size: 9;
resize: vertical;
}
<div class='pagetitlewrapper'>
<div class='pagetitleleft'>Welkom, FNAME LNAME</div>
<div class='pagetitlecenter'><h1>Nexus Consult DMS</h1></div>
<div class='pagetitleright'>
Licensed to <span>DON'T WRAP</span> - License valid until xx/xx/xxxx.
</div>
</div>
This behavior makes sense and is defined in the flexbox specification.
4. Flex Items
Each in-flow child of a flex container becomes a flex item, and each
contiguous run of text that is directly contained inside a flex
container is wrapped in an anonymous flex item.
Your right column (.pagetitleright) is a flex container with flex-direction: column:
.pagetitleleft,.pagetitlecenter,.pagetitleright {
width: 33%;
align-items: stretch;
display: flex;
justify-content: center;
flex-direction: column;
}
In this container, you have three flex items:
<anonymous-flex-item>Licensed to</anonymous-flex-item>
<span>Licensed to</span>
<anonymous-flex-item>- License valid until xx/xx/xxxx.</anonymous-flex-item>
As a result, you're getting three flex items stacked vertically.
It doesn't matter if you use span, b, strong, em. Whatever elements you create in the container become flex items and behave accordingly.
If you don't want these elements to stack vertically, then don't use flex-direction: column.
There is a simple solution. just add white-space: pre-wrap;
Some-Flex-Container {
display: flex;
white-space: pre-wrap; /* solution */
}
I'm new to css, so I not getting the way to make the text center of a container (div).
My HTML is
<div class="container">Some text goes over here.</div>
I tried with text-align: center, and vertical-align: middle, but no luck.
Is there any way we could make the text align in the center of the Div.
You can use the display: table-cell and the vertical-align: middle to set you text at the middle of the container.
.divClass {
width: 200px;
height: 200px;
border: 2px solid red;
text-align: center;
vertical-align: middle;
display: table-cell;
}
Check the working over here. http://jsfiddle.net/32rD7/
Use Text-Align:center;
<div class="container" style="Text-Align:center;">Some text goes over here.</div>
If you don't feel like applying various CSS hacks, you could take a look at the (experimental) flexbox layout.
div.container {
display: flex;
justify-content: center;
align-items: center;
}
Note that I omitted vendor prefixes.