I want to center a custom button and I can't seem to find a solution.
I can align it but I don't know how to make the border smaller and not take up the whole width of my h1 text
HTML:
#button {
color: #6E4E34;
font-size: 30px;
text-decoration: none;
border: solid 2px #6E4E34;
border-radius: 5px;
padding: 10px;
font-family: "PT Sans", sans-serif;
display: flex;
justify-content: center;
}
<div id="ImageMain">
<div id="TextMain">
<h1>Shop our Whole Selection</h1>
Browse
</div>
</div>
You mean something like this?
set #textMain with
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
Snippet
#TextMain {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
#button {
color: #6E4E34;
font-size: 30px;
text-decoration: none;
border: solid 2px #6E4E34;
border-radius: 5px;
padding: 10px;
font-family: "PT Sans", sans-serif;
}
<div id="ImageMain">
<div id="TextMain">
<h1>Shop our Whole Selection</h1>
Browse
</div>
</div>
Try this
#button {
color: #6E4E34;
font-size: 30px;
text-decoration: none;
border: solid 2px #6E4E34;
border-radius: 5px;
padding: 10px;
font-family: "PT Sans", sans-serif;
display: flex;
margin:0 auto;
justify-content: center;
width:100px;
}
Check it out
You have to set the align to center and the margin to auto. Just add the following enclosing div to your button.
<div style="margin:auto; width:200px;" align="center">
Browse
</div>
You just need to wrap your button in a block level element. You could use a <div> so your markup would be;
HTML
<div class="wrapper">
Browse
</div>
CSS
.wrapper #button {
text-align:center;
}
Related
If I comment out my Div wrapper, the page becomes a jumbled mess, if the wrapper is not commented out, it is not a jumbled mess.
Why? My guess is that is is somehow shielded from the CSS, but I am not sure.
I am new so, I apologize in advance.
This exercise is part of the OdinProject, and is the first one I'm actually struggling with understanding.
html,
body {
height: 100%;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
body {
font-family: Roboto, sans-serif;
margin: 0;
background: #aaa;
color: #333;
/* I'll give you this one for free lol */
display: flex;
align-items: center;
justify-content: center;
}
.modal {
display: flex;
gap: 16px;
padding: 16px;
background: white;
width: 480px;
border-radius: 10px;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .2);
}
.icon {
flex-shrink: 0;
color: royalblue;
font-size: 26px;
font-weight: 700;
background: lavender;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.close-button {
background: #eee;
border-radius: 50%;
color: #888;
font-weight: 400;
font-size: 16px;
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
button {
padding: 8px 16px;
border-radius: 8px;
}
button.continue {
background: royalblue;
border: 1px solid royalblue;
color: white;
}
button.cancel {
background: white;
border: 1px solid #ddd;
color: royalblue;
}
.text {
margin-bottom: 16px;
}
<div class="modal">
<div class="icon">!</div>
<div class="wrapper">
<div class="header">Are you sure you want to do that?
<div class="close-button">✖</div>
</div>
<div class="text">text</div>
<button class="continue">Continue</button>
<button class="cancel">Cancel</button>
</div>
Your .modal has the display: flex property. This property applies to all direct children of the .modal element.
If you remove the .wrapper, the elements in the modal are no longer grouped together and they are treated as separate flex items. This is why they appear side to side (.icon, then .header, then .text, then .button all on the same line).
Here is a great guide on the display: flex property.
All HTML elements have default properties. A div has one: display: block;. In this case, when your wrapper div is removed, this property is removed it breaks the appearance because this default is battling the parent element's display: flex property.
Here's the default property list: https://www.w3schools.com/cssref/css_default_values.asp
This question already has an answer here:
Text not centered with justify-content: center
(1 answer)
Closed 1 year ago.
I'm trying to make an array of "buttons" with links.
It works fine when the text is only one line, but if the text wraps to two lines, the lines get left justified.
I'd rather have both lines centered.
.brand-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 500px;
height: 100%;
font-family: Montserrat, verdana, sans-serif;
}
.brand {
font-size: 14px;
width: 31%;
height: 50px;
background-color: #eee;
border: solid 3px white;
display: flex;
justify-content: center;
align-items: center;
}
.brand A {
text-decoration: none;
color: #6f6f6f;
line-height: normal;
}
a {
outline: none;
border: none;
}
<div class="brand-wrap">
<div class="brand">Short</div>
<div class="brand">words</div>
<div class="brand">gets centered</div>
<div class="brand">Both horizontally</div>
<div class="brand">and vertically</div>
<div class="brand">But long sentences get left-justified</div>
</div>
Try this:
.brand-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 500px;
height: 100%;
font-family: Montserrat, verdana, sans-serif;
}
.brand {
font-size: 14px;
width: 31%;
height: 50px;
background-color: #eee;
border: solid 3px white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.brand A {
text-decoration: none;
color: #6f6f6f;
line-height: normal;
}
a {
outline: none;
border: none;
}
<div class="brand-wrap">
<div class="brand">Short</div>
<div class="brand">words</div>
<div class="brand">gets centered</div>
<div class="brand">Both horizontally</div>
<div class="brand">and vertically</div>
<div class="brand">But long sentences <b>DON'T</b> get left-justified</div>
</div>
The problem with your code was that because it overflowed, the container expanded to the maximum possible width, making it appear as if the text wasn't center-aligned. Adding a text-align:center fixes that problem.
You can try adding justify-content: center; or align-items: center;
on your flexbox container!
I'm learning how to create a website using flexbox and I'm having some trouble creating a header.
Basically, one <a> element that wraps around an <img> element takes up much more width than the other elements even though the picture itself isn't nearly as wide.
This is what it looks like: https://i.imgur.com/nEpI4xW.png
Here is my HTML code:
<body>
<div class="main-container">
<div class="header">
Home
Order
<img src="./images/logo.svg" alt="logo">
Checkout
Contact us
</div>
<div class="flowers-inventory">
Flowers Inventory
</div>
<div class="tools-inventory">
Tools Inventory
</div>
<div class="footer">
Footer
</div>
</div>
Here is the CSS code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main-container{
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header{
display: flex;
background-color: #f4f4f4;
align-items: center;
text-align: center;
justify-content: space-evenly;
flex-wrap: nowrap;
}
.header a{
white-space: nowrap;
text-decoration: none;
font-family: Roboto;
text-transform: uppercase;
font-size: 16px;
color: rgb(224, 170, 205);
}
.header img{
width: 22%;
}
.header .logo{
margin: 0 -40em;
}
You can use flex: 1 0 0; in your flex-items (here: .header a selector)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main-container{
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header{
display: flex;
background-color: #f4f4f4;
align-items: center;
text-align: center;
justify-content: space-evenly;
flex-wrap: nowrap;
}
.header a{
white-space: nowrap;
text-decoration: none;
font-family: Roboto;
text-transform: uppercase;
font-size: 16px;
flex: 1 0 0;
color: rgb(224, 170, 205);
}
.header img{
width: 22%;
}
.header .logo{
margin: 0 -40em;
}
<body>
<div class="main-container">
<div class="header">
Home
Order
<img src="https://cdn.clipart.email/2a1b0b49218f3d58c2b6df1630b609d9_free-rectangle-cliparts-download-free-clip-art-free-clip-art-on-_618-361.jpeg" alt="logo">
Checkout
Contact us
</div>
<div class="flowers-inventory">
Flowers Inventory
</div>
<div class="tools-inventory">
Tools Inventory
</div>
<div class="footer">
Footer
</div>
</div>
I´m starting my web developer training and i´m having trouble to move (in this case center) icons / images and text inside flexboxes.
Can anyone help?
my html
<div class="thirdcontainer">
<span class="flex3">
<img src="../challenge/img/feature-quality.png">
<img src="../challenge/img/feature-reliability.png">
<img src="../challenge/img/feature-speed.png"> </span>
</div>
My CSS
.thirdcontainer{
width: 1200px;
height: 150px;
background-color: #173493;
margin: 0 auto;
color: white;
font-family: open sans, serif;
font-size: 12px;
align-items: center;
justify-content: center;
}
.thirdcontainer{
width: 1200px;
height: 150px;
background-color: #173493;
margin: 0 auto;
color: white;
font-family: open sans, serif;
font-size: 12px;
align-items: center;
justify-content: center;
}
You forgot to add display: flex; to the containers CSS...
(note: I changed width to max-width for this example to make it fit in the snippet window).
.thirdcontainer{
max-width: 1200px;
height: 150px;
background-color: #173493;
margin: 0 auto;
color: white;
font-family: open sans, serif;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="thirdcontainer">
<span class="flex3">
<img src="../challenge/img/feature-quality.png">
<img src="../challenge/img/feature-reliability.png">
<img src="../challenge/img/feature-speed.png"> </span>
</div>
I have a 3x3 flexbox with an icon and title in each item/cell. I am just trying to horizontally center the icon (svg image). I tried justify-content: center; but it doesn't seem to work. Can any tell me how to horizontally center an image within a flexbox item (or cell, as I am referring to it as)? Code below.
HTML:
<div class="grid">
<div class="cell">
<img src="images/cs_icon_01.svg">
<div class="service-title">Materials Handling, Warehousing & Storage Facility Management</div>
</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
</div>
CSS:
.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-bottom: 130px;
}
.cell {
flex: 0 0 30%;
height: 220px;
margin-bottom: 20px;
justify-content: center;
}
.grid img {
width: 45px;
}
.service-title {
display: inline-block;
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 300;
color: #4e4e4e;
line-height: 24px;
padding: 20px 16px 4px 16px;
text-align: center;
}
you can give a try to the classic display+margin:
.grid img {
width: 45px;
display:block;
margin:auto;/* horizontal center effect */
}
or use text-align:
.cell {
flex: 0 0 30%;
height: 220px;
margin-bottom: 20px;
/*justify-content*/ text-align: center;
}