I'm trying to move the button underneath the text (which currently says "test?") but the line break(s) is doing nothing. I've googled everything I can think of and can't find anything about this so any help is appreciated!
Html and the CSS for the button if that's relevant:
.custom-button,
.custom-button:visited {
display: flex;
justify-content: center;
align-items: center;
padding: 5px 10px;
border: 2px solid #FFF;
}
.custom-button:hover {
background: #000;
color: #FFF;
}
<h1>
Test? <br>
<a class="custom-button" href="#scroll">Click Me</a>
</h1>
EDIT: Here's the code for the header as well, it seems like the display: flex part is causing the problem but how do I centre the text vertically without that? This is all new to me, so thank you guy for the help!
h1 {
font-size: 62px;
font-family: "Sofia", sans-serif;
color: cyan;
text-align: center;
vertical-align: middle;
background-color: grey;
background-repeat: no-repeat;
background-position: center;
margin: -10px;
height: 110%;
display: flex;
justify-content: center;
align-items: center;
}
This is caused by the combination of display: flex and justify-content: center. Flexboxes are typically used to center things, so if you don't want it centered, there is little reason to use one.
Simply remove display: flex if you want it to set underneath the text. You can also remove justify-content and align-items when you do, as neither of those will affect anything if you remove display: flex:
.custom-button,
.custom-button:visited {
padding: 5px 10px;
border: 2px solid #FFF;
}
.custom-button:hover {
background: #000;
color: #FFF;
}
<h1>
Test? <br>
<a class="custom-button" href="#scroll">Click Me</a>
</h1>
Alternatively, if you want them both centered, you will need to apply your flex rules to both elements, along with flex-direction: column to ensure that the flexbox is vertical as opposed to horizontal:
.custom-button,
.custom-button:visited {
padding: 5px 10px;
border: 2px solid #FFF;
}
.custom-button:hover {
background: #000;
color: #FFF;
}
h1, a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<h1>
Test? <br>
<a class="custom-button" href="#scroll">Click Me</a>
</h1>
I think there is no need for the line break,
you need just to wrap the text into < p > tag
<h1>
<p>Test?</p>
<a class="custom-button" href="#scroll">Click Me</a>
</h1>
You can use a regular div instead of h1, like this:
<div>
<div>Test?</div>
<div><a class="custom-button" href="#scroll">Click Me</a></div>
</div>
So, divs will behave as line breaks by default (i.e. display: block).
Also, you might want to add some additional styling, as well.
Related
I started copying elements and reordering the style elements, I found out that some elements are simply not being computed into the HTML (even though I haven't changed any of the code). It should show as a button inside a flexbox, but it's not displaying properly now on my latest version. Do you mind looking at the code and helping me find out why it's not adequately displaying most of the text attributes I assigned to it?
#flexIV {
width: 404px;
height: 100px;
margin: 0;
padding: 0;
display: flex;
flex-direction: row-reverse;
justify-content: space-around;
}
#BTT_1 a {
font-family: 'Poppins', sans-serif;
font-weight: bold;
color: yellow;
text-decoration: none;
text-align: center;
border-style: solid;
border-style: solid;
background-color: crimson;
border-width: 2px;
padding: 5px;
}
#BTT_1 {
/*background-color: rgb(255, 255, 0);*/
width: 134.6px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<div id="flexIV">
<div id="BTT_1">
<!-- <div id="check">-->
Check<br>webpage
<!--</div>-->
</div>
</div>
</div> <!-- if I delete this element the next property disappears -->
The text in the element is just showing as a clickable link.
Your link isn't working so I can't check your example, however, as your CSS is currently written, everything below this line won't compute:
*/
/*Enter-BTT*/
}
As this is an open/improperly written comment. Try deleting that line and see if it solves your issue.
I'm having trouble vertically centering 2 elements (svg + text). I used flexbox to center these elements, and they are perfectly centered if I do not precise any font-size. But when I put a smaller font-size on the text (0.8em instead of 1em), it creates a small space on top of the text instead of centering it. Horrible colors are to show the blue space on top of the text. Does anyone know how to fix this ?
I've already tried adding text-align: center; vertical-align: middle;
The parent div (blue) centers elements with flex: display: flex; align-items: center;
Thanks a lot
Edit: Here is a snippet, I somehow can't find how to link a file (the svg) ?
a {
text-decoration: none;
}
/*Parent div*/
.parent {
width: 20vw;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1vw;
background-color:skyblue;
}
/*Svg*/
.parent img {
width: auto;
height: 3vh;
margin-right: 10px;
background-color: rosybrown;
}
/*Text*/
span {
font-size: 0.8em;
background-color: seagreen;
}
<div class="parent">
<div>
<img src="https://cdn0.iconfinder.com/data/icons/feather/96/heart-512.png"><span>Favoris</span>
</div>
</div>
I would try to set the line-height of the text element to the same value as your font-size. I would also not define a height for the text element (I am not sure if you are doing this or not, since you did not provide your code).
So something of the sort:
div.container {
display: flex;
align-items: center;
padding: 10px;
background-color: #4169E1;
}
div.container img {
width: 40px;
height: 40px;
margin-right: 20px;
background-color: #BC8F8F;
}
div.container span {
font-size: 20px;
line-height: 20px;
color: #4B565C;
background-color: #2E8B57;
}
<div class="container">
<img src="https://cdn0.iconfinder.com/data/icons/feather/96/heart-512.png"/>
<span>Favoris</span>
</div>
Found the problem:
<a href="#">
<div class="parent">
<img src="img/coeur.svg">
<span>Favoris</span>
</div>
</a>
I just had to invert the <a> tag and <div> and everything is well centered.
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>
I am trying to draw a short horizontal line over an image. Like a quote followed by horizontal line followed by author name. An example of what I'm trying to do is below.
How can I achieve this in html css?
You can use either an hr or a div with a border. I made a simple example, hope it helps.
html, body{
height: 100%
}
body{
background: lightslategray;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.quote {
background: url('http://lorempixel.com/g/600/200/abstract/?random=true');
color: white;
background-size: cover;
padding: 2rem;
text-align: center;
}
hr {
width: 40%;
}
<div class="quote">
<h1>A dream doesn't become reality through magic<br/> it takes sweat, determination and hard work.</h1>
<hr />
<h2>Colin Powell</h2>
</div>
you can use the horizontal line in html <hr>
You can do it in several way. How you go about it will depend on what you are trying to accomplish. Here are two ways; one using br element and the other using a div (it could be a label too). If you want to use a different color and add more style to it, you want to go with the div
.motto, .author{
display: block;
text-align: center;
}
.motto{
font-size: 1.85em;
}
.br{
width: 50%;
height: 2px;
margin: 25px auto;
border-radius: 2px;
background-color: #0088ee;
}
<i class="motto">It is better to be feared than loved if you cannot be both</i>
<div class="br"></div>
<!-- <hr/> -->
<strong class="author">Niccolo Machiavelli</strong>
Comment out <div class="br"></div> and uncomment <hr/> to see the two results.
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;
}