I have a several buttons on a page and I am suing flex and flex-wrap to give them spreading ability. I cannot however get the text within the elements to center in their 100x100 px boxes (the size is an attribute of the .
I tried some solutions here, but none of them seem to work for my situation: CSS Center text (Horizontal and Vertical) inside a DIV block
The Line-height solution does not work, as some of the text takes more than one line.
The absolute positioning solution also does not work as it places the buttons all on top one of another.
The table approach is undesirable as it does not allow the buttons to wrap. Also I am going to have over 30 of these buttons.
HTML:
<section id="directory">
Jaguar Chagra
A marriage breaks up
Amasanga warmi
Anaconda caught
Big Water Killing
</section>
CSS:
#directory {
display: flex;
flex-wrap: wrap;
}
#directory a {
background-color: #BFBDAF;
width: 100px;
height: 100px;
margin: 10px;
padding: 20px;
text-decoration: none;
color: black;
text-align: center;
vertical-align: middle; /* does nothing */
Here is an image of what it looks like so far:
You need to add align-items: center; to #directory a and make it a block-level element with display: flex.
#directory a {
display: flex;
background-color: rgb(191, 189, 175);
width: 100px;
height: 100px;
margin: 10px;
padding: 20px;
text-decoration: none;
color: rgb(0, 0, 0);
text-align: center;
align-items: center;
}
Related
I need to build a circular button... and I've already seen many answers... and yes... they all work... but the button I need has inside an angular material icon that occupies the entire space of the circle... so when I use these solutions and increase the size of the icon then it becomes unfit.
For example... using the same solution shown in centering-text adapted to what I need this is the code I use:
.btn-circle {
border: 10px solid white;
background-color: #444;
/*background: #97c83e;*/
width: 72px;
height: 72px;
border-radius: 100%;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
text-decoration: none;
/*
text-orientation:sideways;
writing-mode: vertical-lr;
*/
text-align: center;
font-size: 55px;
/*
font-size: 35px;
*/
}
<a href="" class="btn-circle">
‹‹
</a>
In this case with the font size set to 35px everything looks fine.
The button I need to build would be exactly one like this:
I have also used the method of the div with display table and another div inside with display table-cell as in align-text-vertically and the same thing happens to me.
What you need to be aware of is that the vector object, in this case ‹ has been saved with additional alpha space above and below it. This is done because it is part of a font set and needs to align correctly with other font characters.
See this example of how the vectors have included space. Only the S will be centralised.
EXAMPLE
div {
font-size: 55px;
background:#ccc;
}
<div>Ss‹y</div>
MANUAL OFFSET
Use `line-height`, `margin`, `padding` or absolute positioning to manually offset font position after centering.
Also note align-items controls children. align-content controls self.
.btn-circle {
background-color: #444;
width: 72px;
height: 72px;
border-radius: 100%;
text-decoration: none;
display: flex;
justify-content: center;
align-content: center;
color: white;
font-weight: bold;
font-size: 55px;
line-height:60px;
}
<a href="" class="btn-circle">
‹‹
</a>
UNICODE ALTERNATIVE
You will get the best control by setting the flex content to a control that can be targeted like a span tag. this way you can directly manipulate the object. In this case setting it to fill its container.
This unicode example is not ideal as it has some alpha space.
You can find others here - https://unicode-table.com/
.btn-circle {
background-color: #444;
width: 72px;
height: 72px;
border-radius: 100%;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
}
.btn-circle span {
color: white;
font-size: 55px;
height: 100%;
}
<a href="" class="btn-circle">
<span>«</span>
</a>
SVG
Personally I use svg icons that are already perfectly centered vectors and easier to work with.
I don't recommend linking svg's to independant files. I would use them
inline. This is just an example.
.btn-circle {
width: 72px;
height: 72px;
border-radius: 100%;
display: flex;
fill:#fff;
background: #ddd url("https://www.svgrepo.com/show/361731/chevron-double-left.svg") no-repeat center center;
background-size: 40px;
}
What I want it to look like, even in mobile view (resized)
What it looks like when shrunk
I have used padding-left:10px to create a space between text here.
Are you looking for something like this ?
.container {
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.container span {
padding: 5px;
color: white;
text-transform: uppercase;
}
<div class="container">
<span>Home</span>
<span>Awards</span>
<span>Essay</span>
<span>Impact Made</span>
</div>
So vertically centering text seemed simple enough with justify-content and align-items center but when I looked closely I can see that the text isn't truly centered. It has less spacing at the top of the character. I tried to investigate further by searching online and I found this https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align but there must be a simpler solution to this.
Example
https://jsfiddle.net/z7cy487o/
html,
body {
height: 100%;
}
.box {
height: 10%;
width: 400px;
background: #000;
font-size: 11vh;
color: #FFF;
text-align: center;
padding: 0 20px;
margin: 20px;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
<div class="box">
C
</div>
The way you perceive that depends on which characters you are using. I copied your example twice to show different situations:
In the second version I only used the letter "y", which has a descender, i.e. a part that extends below the baseline, to the lower border of the area which is defined as line-height. On the other hand, it doesn't go up the whole way, so it seems exactly the opposite of the first version (letter "C") concerning vertical alignment.
In the third version I used both of those letters combined in a word. Here you can see that the different characters/letters together indeed do extend across the whole width, so the vertical centering is correct as it is.
Line-height (and in relation to that, vertical alignment of letters) does not depend on which letters are used - it always applies to all possible letters/characters, even if they are not used in that particular situation.
html, body { height: 100%; }
.box
{
height: 10%;
width: 400px;
background: #000;
font-size: 11vh;
color: #FFF;
text-align: center;
padding: 0 20px;
margin: 20px;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
<div class="box">
C
</div>
<div class="box">
y
</div>
<div class="box">
Cyborg
</div>
This solution based off a modified version of Center text character ☢ vertically and horizontally within a circle (CSS)
It seems to work with dynamic heights, but as Johannes mentions in the comment of his answer. I believe the solution will only work well with my situation.
html,
body {
height: 100%;
}
.box {
height: 10%;
width: 400px;
background: #000;
font-size: 11vh;
color: #FFF;
text-align: center;
padding: 0 20px;
margin: 20px;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
.char {
line-height: 1px;
font-family: sans-serif;
font-weight: 500;
position: relative;
top: 0.05em;
}
<div class="box">
<span class="char">C</span>
</div>
So, I've just started learning HTML/CSS and I've been trying to figure out how to 'stick' a line under an h2 tag. What I mean by this is that in the HTML there is an h2 tag called Instructions followed by a div tag that contains 3 other divs that make up a line segment. By default the line is on the left side (naturally), but what I want to do is have the line stuck under the h2 tag so when the browser is extended or shrunk the line stays directly under the h2 tag instead of moving across the screen by itself.
I came across this site: http://www.barelyfitz.com/screencast/html-training/css/positioning/ and I was using it to try and see if absolute/relative positioning would help here. I guess I'm doing it horribly wrong since it doesn't seem to help.
I'm providing HTML/CSS and a jsfiddle below (The jsfiddle doesn't show how the line moves around when the browser is extended/shrunk, though so I'm hoping you get what I mean). If you can help guide me or give me some resources to understand what I need to do better that would be great :D
I'm sure this is trivial, but I'm trying to do my due diligence in learning it. There were a lot of different methods (I think) I found, but they seemed kinda complex.
HTML
<div id="instructions_box">
<h2>Instructions</h2>
<div class="line_divider">
<div class="blue_line"></div>
<div class="yellow_line"></div>
<div class="blue_line"></div>
</div>
</div>
CSS
#instructions_box{
display: inline-block;
//position: relative;
}
.line_divider{
background-color: aqua;
//position: absolute;
//bottom: 0;
//right: 2rem;
}
.blue_line{
height: 2px;
width: 50px;
background-color: rgb(0,0,139);
float: left;
}
.yellow_line{
height: 2px;
width: 90px;
background-color: yellow;
float: left;
}
#instructions_box h2{
text-align: center;
}
https://jsfiddle.net/10szzwvs/1/
Thanks
The wrapping you're seeing is, I think, due to the fixed widths you're using. Change your line width to percentages and it wont wrap on any size screen. Note you'll need to add your visual spacing elsewhere, e.g. on the h2 itself.
#instructions_box{
display: inline-block;
}
#instructions_box h2{
text-align: center;
padding: 0 25px 0; /* visual spacing */
margin: 0;
}
.line_divider{
background-color: aqua;
}
.blue_line{
height: 2px;
width: 30%; /* dynamic width here */
background-color: rgb(0,0,139);
float: left;
}
.yellow_line{
height: 2px;
width: 40%; /* dynamic width here */
background-color: yellow;
float: left;
}
<div id="instructions_box">
<h2>Instructions</h2>
<div class="line_divider">
<div class="blue_line"></div>
<div class="yellow_line"></div>
<div class="blue_line"></div>
</div>
</div>
You can always use CSS3 Flexbox. You've got to have the div of lines and the h2 in the same container as you already do. And then.
#instructions_box{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
Hi,
Please see the above picture.
I need a link, in the shape of a circle:
- The whole circle should be the active area of the link
- Corners of the square 'behind' the circle should not be active
- Must allow for multiple lines of text in the circle
Note: I can do this fairly easily with table-cell but I need the active area to be only the circle. I dont want the user to be able to hover over the corner of the square behind the circle and click the link.
Thanks
You could use border-radius with a fairly big radius. Check this fiddle:
a {
display: inline-block;
border-radius: 80px;
height: 80px;
width: 80px;
background: red;
padding-top: 25px;
text-align: center;
box-sizing: border-box;
}
As to how to center the text in the button: with just one line of text you could simply set the line-height of the button to equal its height. But that won't work with multiple lines of text obviously. Check out this fiddle from this SO answer, it might help you out.
See the following sample. Note the line-height: 160px; - this trick aligns the text vertically.
.circle-link{
display: inline-flex;
width: 160px;
height: 160px;
background-color: green;
color: white;
border: solid 1px darkgreen;
border-radius: 80px;
font-size: 20px;
text-decoration: none;
text-align: center;
align-items: center;
justify-content: center;
}
<a href='#' class='circle-link'>Multiline<br />cyrcle link</a>
UPDATE:
If you need to center text with multiple lines (or even a text with images), the most reliable method is using of flexible model. Instead of 'display: block' or 'inline-block' set display: flex; or display: inline-flex; and then align-items: center; and justify-content: center;
For more information about vertical centering methods see the article Vertical centering of elements in HTML