Why can I center a button with flex but not a link?
#quote-btn-div {
display: flex;
}
#quote-btn,
#twitter-link {
background-color: #999;
/* Green */
border: none;
width: 300px;
height: 100px;
margin: 0 auto;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
}
#twitter-link {
background-color: red;
}
<div id="quote-box">
<div id="quote-btn-div">
<button id="quote-btn">New Quote</button>
<a id="twitter-link">Twitter link</a>
</div>
</div>
Sorry if this is a stupid question, I'm still learning.
line-height is often used to vertically center a single line of text. Since you have set a height on your button, set line-height to that value.
#twitter-link { line-height: 100px; }
#quote-btn-div {
display: flex;
}
#quote-btn,
#twitter-link {
background-color: #999;
/* Green */
border: none;
width: 300px;
height: 100px;
margin: 0 auto;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
}
#twitter-link {
background-color: red;
line-height: 100px;
}
<div id="quote-box">
<div id="quote-btn-div">
<button id="quote-btn">New Quote</button>
<a id="twitter-link">Twitter link</a>
</div>
</div>
#twitter-link {
line-height: 100px;
}
Related
I have a particular issue where my container's css gives the textarea and buttons a vertical flex direction. I only want the buttons to be aligned vertically with the textarea, which that vertical flex direction does, but I want my two buttons to be side by side.
As you can see in the following HTML, I tried to apply a row flex direction to just the .buttons class, but that hasn't fixed my issue. What am I doing wrong here?
.body {
background-image: url(https://media.giphy.com/media/dQtH57ix3NWDKOQeQM/giphy.gif);
width: 480px;
height: 270px;
float: left;
border-radius: 20px;
}
.fill {
background-color: #00000d;
width: 480px;
height: 270px;
border-radius: 20px;
opacity: .8;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.proxies {
margin-left: auto;
margin-right: auto;
border-radius: 10px;
margin-bottom: auto;
margin-top: 35px;
color: yellow;
background-color: #00000d;
border-color: yellow;
border-width: 3px;
outline: none;
text-align: center;
resize: none;
}
.buttons {
margin-bottom: auto;
flex-direction: row;
}
.close {
color: yellow;
background-color: transparent;
font-family: calibri;
border-radius: 10px;
border-color: yellow;
outline: none;
}
.add {
color: yellow;
background-color: transparent;
font-family: calibri;
border-radius: 10px;
border-color: yellow;
outline: none;
}
<script src="https://kit.fontawesome.com/5276b58f35.js" crossorigin="anonymous"></script>
<right class="body">
<div class="fill">
<textarea class="proxies" name="proxies" id="proxies" cols="30" rows="10" placeholder="ip:port:name:pass"></textarea>
<div class="buttons"></div>
<button class="close">Close</button>
<button class="add">Add Proxies</button>
</div>
</div>
</right>
Just put the buttons in their own div and you should have it
<right class="body">
<div class="fill">
<textarea class="proxies" name="proxies" id="proxies" cols="30" rows="10" placeholder="ip:port:name:pass"></textarea>
<div class="buttons"></div>
<div class="buttons">
<button class="close">Close</button>
<button class="add">Add Proxies</button>
</div>
</div>
</div>
</right>
css for spacing
.close {
color: yellow;
background-color: transparent;
font-family: calibri;
border-radius: 10px;
border-color: yellow;
outline: none;
margin-right: 1rem;
}
How do I make the text appear in the center and the button appear to the right of the box while still being able to nicely scale the screen? Meaning the space between the box and the text will grow when the screen zoomed out and space will shrink when the screen zoomed in.
Here is what I have...
https://imgur.com/a/MigatID
Here is what I want to get...
https://imgur.com/H2gCl0S
EDIT: Here is the JSFiddle...
https://jsfiddle.net/d697spr8/1/
<div id="outer">
<div class="topStuff">
<p>Games</p>
<div class="dropdownListPg">
<button class="dropbtn" style="height: 50px; width: 120px">Sort By
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdownListPg-content" style="color: black">
<button style="height: 50px; width: 120px">Alphabetical</button>
<button style="height: 50px; width: 120px">Date</button>
<button style="height: 50px; width: 120px">User Score</button>
</div>
</div>
</div>
</div>
#outer
{
min-width: 1200px;
}
.topStuff
{
display: flex;
justify-content: center;
margin: 0;
margin-top: 20px;
margin-left: 150px;
margin-right: 150px;
padding: 0;
background-color: #999999;
}
.dropdownListPg
{
display: inline;
}
.dropdownListPg .dropbtn
{
}
.dropdownListPg-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: fit-content;
height: fit-content;
overflow-x: hidden;
margin: 0;
padding: 0;
}
.dropdownListPg-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
color: black !important;
margin: 0;
padding: 0;
}
.dropdownListPg-content a:hover
{
background-color: wheat !important;
}
.dropdownListPg:hover .dropdownListPg-content
{
display: block;
}
You can use flex positioning. Also i noticed that you nested <button></button> inside <a></a> it is considered a bad practise to nest interactive element into another interactive element.
Also there is another variant with position: absolute applied to dropdown, but in that case flex is better.
#outer {
min-width: 1200px;
}
.topStuff {
display: flex;
justify-content: center;
margin-top: 20px;
margin-left: 150px;
margin-right: 150px;
background-color: #999999;
}
.holder {
flex: 1 0 auto;
}
.holder--align--right {
display: flex;
justify-content: flex-end;
}
.dropdownListPg {
position: relative;
}
.dropdownListPg-content {
position: absolute;
top: 100%;
z-index: 1;
display: none;
width: 100%;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdownListPg-content a {
display: block;
color: black;
padding: 12px 16px;
text-decoration: none;
text-align: left;
}
.dropdownListPg-content a:hover {
background-color: wheat;
}
.dropdownListPg:hover .dropdownListPg-content {
display: block;
}
<div id="outer">
<div class="topStuff">
<div class="holder"></div>
<p>Games</p>
<div class="holder holder--align--right">
<div class="dropdownListPg">
<button class="dropbtn" style="height: 50px; width: 120px">Sort By
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdownListPg-content">
Alphabetical
Date
User Score
</div>
</div>
</div>
</div>
</div>
As you can see in the snippet below, I have 1 div which has display property set to flex and then this div has 2 children divs which take flex:1 space ( 50% ). Each of those divs contains 1 button each.
Now the problem is this. I want the first button to be at the start of the first div ( so left side ) and the second button to be at the end of the second div ( so right side ). Currently both buttons are at the left side of their respective divs.
And while we're at it, is using flexbox the best way to create side by side divs like I've done nowadays?
.edit-btn, .submit-btn {
display: block;
color: black;
cursor: pointer;
text-align: center;
border-radius: 4px;
border: none;
padding: 8px 10px 8px 10px;
line-height: 1.2;
outline:none;
}
.flex-row {
display: flex;
margin-bottom: 10px;
}
.flex-column {
flex: 1;
}
.like, .edit {
width: 150px;
font-size: 13px;
}
.submit-btn {
background-color: #4CAF50;
}
.edit-btn {
background-color: #13aff0;
}
<div class="flex-row">
<div class="flex-column">
<button class="submit-btn like">Like</button>
</div>
<div class="flex-column">
<a class='edit-btn edit' href="#">Edit</a>
</div>
</div>
You don't need .flex-column wrappers. And use justify-content: space-between;
.edit-btn,
.submit-btn {
display: block;
color: black;
cursor: pointer;
text-align: center;
border-radius: 4px;
border: none;
padding: 8px 10px 8px 10px;
line-height: 1.2;
outline: none;
}
.flex-row {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.like,
.edit {
width: 150px;
font-size: 13px;
}
.submit-btn {
background-color: #4CAF50;
}
.edit-btn {
background-color: #13aff0;
}
<div class="flex-row">
<button class="submit-btn like">Like</button>
<a class='edit-btn edit' href="#">Edit</a>
</div>
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 4 years ago.
I've tried vertical-align: middle; and margin: auto 0; but it doesn't seem to be working? Is there something I'm missing here? My logic is, I put the vertical-align: middle; in the parent container. Shouldn't that center the "children" class into the center vertically? I've also tried adding, padding:auto 0; to the "children" class but that didn't seem to do anything either...
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: block;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
vertical-align: middle;
}
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
Try to use display:flex here in the parent class .content and margin:auto in .children class to center it horizontally and vertically...
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: flex;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
vertical-align: middle;
}
.content .children {
margin: auto;
}
<body>
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
</body>
However vertical-align works on tables with display:table-cell...and also you will need to apply vertical-align:middle in the elements itself not in the parent
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
font-size: 50px;
}
.btn {
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover {
background-color: #38ada9;
cursor: pointer;
}
.content {
display: table;
width: 100%;
background-color: #b2bec3;
text-align: center;
height: 100vh;
font-family: helvetica;
}
.content .children {
vertical-align: middle;
display: table-cell;
}
<body>
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
</body>
body{
margin: 0;
padding: 0;
}
h1{
margin: 0;
font-size: 50px;
}
.btn{
border: 4px solid #079992;
padding: 2px 15px;
color: #079992;
font-size: 1.5em;
font-weight: 800;
display: inline-block;
}
.btn:hover{
background-color: #38ada9;
cursor: pointer;
}
.content{
display: flex;
background-color: #b2bec3;
text-align: center;
height: 100vh;
width:100%;
font-family: helvetica;
justify-content:center;
align-items:center;
}
<div class="bg-img">
<div class="content">
<div class="children">
<h1>Random Quote Generator</h1>
<p>Press the button below for an inspirational quote!</p>
<div class="btn">Click Me Bro!</div>
</div>
</div>
</div>
use flex method to vertical align.
https://jsfiddle.net/raj_mutant/529bcr98/
so I'm trying to do a "cast" section for one of my assignments and I want the actor's character to appear when the actor is hovered over. How would I achieve this? When hiding the display of the deadpool div, it leaves a big gap in the page. I want this to not show until Ryan Reynolds is hovered over.
article {
display: flex;
flex-wrap: wrap;
margin: auto;
padding-top: 12px;
padding-bottom: 12px;
background-color: #8b2323;
width: 48vw;
min-height: 200px;
min-width: 391px;
font-family: verdana, sans-serif;
justify-content: center;
}
.castcontainer {
flex-wrap: wrap;
min-width: 215px;
width: 20%;
height: 30%;
overflow: hidden;
padding: 5px;
}
#cast {
border-radius: 50%;
width: 100%;
}
.cast2 {
display: none;
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
.cast:hover+.cast2 {
display: block;
}
.cast {
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
p {
background: white;
}
<article>
<div class="castcontainer">
<div class="cast">
<img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" id="cast">
<p><b>Ryan Reynalds</b></p>
</div>
</div>
<div class="castcontainer">
<div class="cast2">
<img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg" id="cast">
<p><b>Wade Wilson</b></p>
</div>
</div>
</article>
Let me offer a more radical departure from your current code:
.cast * {
box-sizing: border-box;
}
.cast {
border-radius: 10px;
background: #8b2323;
font-family: Verdana, sans-serif;
text-align: center;
padding: 12px;
}
.cast img {
border-radius: 50%;
max-height: 300px;
}
.cast strong {
background: white;
display: block;
border-radius: 10px;
margin-top: 5px;
}
.cast .actor,
.cast .role {
width: 100%;
}
.cast .actor {
display: block;
z-index: 2;
}
.cast .role {
display: none;
z-index: 1;
}
.cast:hover .actor {
display: none;
}
.cast:hover .role {
display: block;
}
<article class="cast">
<div class="actor">
<img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg">
<strong>Ryan Reynalds</strong>
</div>
<div class="role">
<img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg">
<strong>Wade Wilson</strong>
</div>
</article>
This reduces the number of child elements and (in my opinion) makes selecting which element to show/hide that much easier. You're targeting the :hover event of the parent wrapper and instead of trying to use an ID (which cannot be reused) you're targeting .actor and .role.
One concern would be to make sure that the images for each were the same dimension, otherwise on change you could get some transition that was unappealing if the box had to resize.
Might this be what you're looking to do?
Added:
article:hover .cast {
display: none;
}
article:hover .cast2 {
display: block;
}
article {
display: flex;
flex-wrap: wrap;
margin: auto;
padding-top: 12px;
padding-bottom: 12px;
background-color: #8b2323;
width: 48vw;
min-height: 200px;
min-width: 391px;
font-family: verdana, sans-serif;
justify-content: center;
}
article:hover .cast {
display: none;
}
article:hover .cast2 {
display: block;
}
.castcontainer {
flex-wrap: wrap;
min-width: 215px;
width: 20%;
height: 30%;
overflow: hidden;
padding: 5px;
}
#cast {
border-radius: 50%;
width: 100%;
}
.cast2 {
display: none;
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
.cast:hover+.cast2 {
display: block;
}
.cast {
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
p {
background: white;
}
<article>
<div id="one" class="castcontainer">
<div class="cast">
<img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" id="cast">
<p><b>Ryan Reynalds</b></p>
</div>
</div>
<div id="two"class="castcontainer">
<div class="cast2">
<img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg" id="cast">
<p><b>Wade Wilson</b></p>
</div>
</div>
</article>
<article>
<div class="castcontainer" id="show1">
<div class="cast">
<img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" class="castImg" id="CastImgRef">
<p><b>Ryan Reynalds</b></p>
</div>
</div>
<div class="castcontainer" id="show2">
<div class="cast2">
<img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg" class="castImg">
<p><b>Wade Wilson</b></p>
</div>
</div>
</article>
jQuery(function ($) {
$('#show1').hover(function () {
$(this).find('img').attr('src', function (i, src) {
return src.replace('https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg', 'http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg')
})
$('#textChange').text('Wade Wilson');
}, function () {
$(this).find('img').attr('src', function (i, src) {
return src.replace('http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg', 'https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg')
})
$('#textChange').text('Ryan Reynalds');
})
})
Add thisjquery and it will work fine
https://jsfiddle.net/dLwxm2ox/8/
article {
display: flex;
flex-wrap: wrap;
margin: auto;
padding-top: 12px;
padding-bottom: 12px;
background-color: #8b2323;
width: 48vw;
min-height: 200px;
min-width: 391px;
font-family: verdana, sans-serif;
justify-content: center;
}
article:hover .cast {
display: none;
}
article:hover .cast2 {
display: block;
}
.castcontainer {
flex-wrap: wrap;
min-width: 215px;
width: 20%;
height: 30%;
overflow: hidden;
padding: 5px;
}
#cast {
border-radius: 50%;
width: 100%;
}
.cast2 {
display: none;
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
.cast:hover+.cast2 {
display: block;
}
.cast {
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
p {
background: white;
}
<article>
<div id="one" class="castcontainer cast">
<img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" id="cast">
<p><b>Ryan Reynalds</b></p>
</div>
<div id="two"class="castcontainer cast2">
<img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg" id="cast">
<p><b>Wade Wilson</b></p>
</div>
</article>
The inner div seems to be unnecessary where class="cast" and class="cast2". Remove the div's and add the class to its parent.