I'd like to push the three icons below towards the center of the page while still retaining a responsive layout.
Is display: grid; or display: row; more suitable?
And depending on your answer, what are the cleanest properties to apply?
<html>
<div id="contact">
<h1>Let's connect.</h1>
<div id="image-holder">
<div id="github-div">
<a href="https://github.com/klin-nj-97" target="_blank" id="profile-link">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="github" class="contact-img">
</a>
</div>
<div id="linkedin-div">
<a href="https://www.linkedin.com/in/kevin-lin-33085a133/" target="_blank">
<img src="http://simpleicon.com/wp-content/uploads/linkedin.png" alt="linkedin" class="contact-img">
</a>
</div>
<div id="email-div">
<a href="mailto:kevin_lin#brown.edu">
<img src="https://image.freepik.com/free-icon/email-envelope-outline-shape-with-rounded-corners_318-49938.jpg" alt="email" class="contact-img">
</a>
</div>
</div>
</div>
</html>
<style>
#contact h1 {
text-align: center;
padding-top: 75px;
padding-bottom: 55px;
}
#image-holder {
display: flex;
flex-flow: row;
margin-left:
}
#contact a{
color: white;
}
.contact-img {
height: 35px;
width: 35px;
padding: 30px;
border-radius: 15px;
border: 2px solid black;
}
</style>
You should be use this simple trick.
Please give align-items: center; justify-content: center; into #image-holder
For more details Go to display:flex
Hope this help.
Let me know further clarifications.
#contact h1 {
text-align: center;
padding-top: 75px;
padding-bottom: 55px;
}
#image-holder {
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
}
#contact a{
color: white;
}
.contact-img {
height: 35px;
width: 35px;
padding: 30px;
border-radius: 15px;
border: 2px solid black;
}
<html>
<div id="contact">
<h1>Let's connect.</h1>
<div id="image-holder">
<div id="github-div">
<a href="https://github.com/klin-nj-97" target="_blank" id="profile-link">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="github" class="contact-img">
</a>
</div>
<div id="linkedin-div">
<a href="https://www.linkedin.com/in/kevin-lin-33085a133/" target="_blank">
<img src="http://simpleicon.com/wp-content/uploads/linkedin.png" alt="linkedin" class="contact-img">
</a>
</div>
<div id="email-div">
<a href="mailto:kevin_lin#brown.edu">
<img src="https://image.freepik.com/free-icon/email-envelope-outline-shape-with-rounded-corners_318-49938.jpg" alt="email" class="contact-img">
</a>
</div>
</div>
</div>
</html>
Add the property justify-content: center; to the #image-holder id.
The buttons will be centered.
Code below
JSFiddle
The cleanest way to do this is to:
Use class-based selectors instead of ID selectors
Use flexbox to centre the layout (and text) horizontally, and centre the layout vertically
I've changed your HTML to use class-based selectors instead of IDs, e.g. class="contact" instead of id="contact":
<div class="contact">
<h1 class="contact__title">Let's connect.</h1>
<div class="contact__images">
<a class="contact__link" href="https://github.com/klin-nj-97" target="_blank">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="github" class="contact__icon">
</a>
<a class="contact__link" href="https://www.linkedin.com/in/kevin-lin-33085a133/" target="_blank">
<img src="http://simpleicon.com/wp-content/uploads/linkedin.png" alt="linkedin" class="contact__icon">
</a>
<a class="contact__link" href="mailto:kevin_lin#brown.edu">
<img src="https://image.freepik.com/free-icon/email-envelope-outline-shape-with-rounded-corners_318-49938.jpg" alt="email" class="contact__icon">
</a>
</div>
</div>
For the cleanest CSS, it's ideal that all your selectors have the same level of specificity, and the best way to do that is use only class-based selectors. This will let you override styles more easily. You can read more about CSS specificity here.
The following CSS uses flexbox to position your content accordingly, assuming you are trying to centre everything vertically within the page:
body {
margin: 0; /* browser adds margins by default */
}
.contact {
display: flex;
flex-direction: column;
justify-content: center; /* centers your content horizontally */
align-items: center; /* centers your content vertically */
height: 100vh;
}
.contact__title {
margin: 0 0 55px; /* if you have a header you'd like to account for, the first value can be the header height */
}
.contact__images {
/* you don't even need anything here but the wrapping div of this classname is required to keep your icons aligned */
}
.contact__link {
text-decoration: none; /* proper way to hide the text link underline */
}
.contact__icon {
height: 35px;
width: 35px;
padding: 30px;
border-radius: 15px;
border: 2px solid black;
}
The CSS class naming convention I used is called BEM. I recommend reading more about it if you are interested in writing clean CSS. You can do so here or here.
I have a working example here on CodePen. You can change the height of the page to see it's centred vertically.
Related
I want to change the style of my component to fit the content,
My component Plan.vue:
<template>
<div class="plan">
<div id="planFlex">
<font-awesome-icon icon="fa-solid fa-user fa-xl" />
<font-awesome-icon icon="fa-solid fa-arrow-left fa-xl" />
<h1>Plan</h1>
<font-awesome-icon icon="fa-solid fa-arrow-right fa-xl" />
<font-awesome-icon icon="fa-solid fa-robot fa-xl" />
</div>
</div>
</template>
<script>
export default {
name: "Plan"
};
</script>
<style>
#import "../css/Plan.css";
</style>
my stylesheet Plan.css:
#planFlex {
display: flex;
justify-content: space-between;
padding: 5px;
}
.fa-user {
color: white;
}
.fa-robot {
color: white;
}
.fa-arrow-right {
color: white;
position: relative;
padding-left: 80px;
}
.fa-arrow-left {
color: white;
padding-right: 80px;
}
#planFlex h1 {
text-align: center;
margin: 0px;
color: antiquewhite;
}
#planFlex h1:hover {
cursor: pointer;
}
#planFlex h2 {
margin: 0px;
padding-left: 3%;
color: white;
}
I have tried to add flex-shrink: 1, and width: fit-content to my stylesheet, but it didn't work well with me, can you please tell me how can I make my design responsive? thanks in advance.
The problem is with .plan outer div which by default will display as block, making your #planFlex stretch to its borders.
If you add the following you should find that #planFlex will just be the width of your content:
.plan {
display: flex;
justify-content: center;
}
In your specific case, you should consider removing the 80px padding on your arrow icons and let flex do the spacing for you. Assuming you want the icons to stick to the sides and your title right in the middle, just wrapped them around in some div, that did the trick for me running your project:
<div id="planFlex">
<div>
<i class="fa-solid fa-user fa-xl"></i>
<i class="fa-solid fa-arrow-left fa-xl"></i>
</div>
<h1 #click="addPopUp(testPopup, `Lego not in the right place`)">Plan</h1>
<div>
<i class="fa-solid fa-arrow-right fa-xl"></i>
<i class="fa-solid fa-robot fa-xl"></i>
</div>
</div>
My 3 images need to be in screen center. I use flexbox. After adding size to images all of them go to left. Also I can't throw off margin
This is what I need
This is what I have
My cod:
.collection {
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
}
<ul class="collection">
<li><img class="col-img" src="images/bouquets.jpeg" alt=""><p class="col-text">Букети</p></li>
<li><img class="col-img" src="images/natural_flowers.jpeg" alt=""><p class="col-text">Живі квіти</p></li>
<li><img class="col-img" src="images/own_bouquet.png" alt=""><p class="col-text">"Свій" букет</p></li>
</ul>
This can be solved by absolutely positioning your p tag on top of your image. Use translate and top/left rules to move it to the center. Also make the a tag as display:block so it effectively covers the image. See below.
Edited:
There were a few small tweaks, the a tag had a 3 pixels below it which are space for descenders. This has been removed using line-height and means that images stack directly on top of each other. In the comments it was also stated that the images needed to be cropped and centered. This was done with display: flex on the anchor tag and then using align-self: center to prevent it from shrinking to the size of the parent div. Finally they were cropped using overflow:hidden. Now that the anchor tag is using flexbox the need to use inset and translate isn't needed as they center anyway.
Hope this helps
.collection {
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
padding-left: 0;
}
a {
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: white;
line-height:1;
height: 200px;
overflow: hidden;
box-shadow: 0px 0px 20px 2px #757575;
}
a p {
position: absolute;
background-color: #A6BFEA;
padding: 1rem 2rem;
margin: 0;
box-shadow: 0px 0px 20px 2px #757575;
line-height:normal;
}
img {
align-self:center;
translate: auto -50%;
}
<ul class="collection">
<li>
<a href="#">
<img class="col-img" src="https://placekitten.com/500/300" alt="">
<p class="col-text">Букети</p>
</a>
</li>
<li>
<a href="#">
<img class="col-img" src="https://www.fillmurray.com/500/300" alt="">
<p class="col-text">"Свій" букет</p>
</a>
</li>
<li>
<a href="#">
<img class="col-img" src="https://www.placecage.com/500/300" alt="">
<p class="col-text">"Свій" букет</p>
</a>
</li>
</ul>
.collection {
list-style: none;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
Something like this?
li {
margin-bottom: 3rem;
}
.collection {
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.container p {
position: absolute;
background: green;
color: white;
}
<ul class="collection">
<li>
<a href="#">
<div class="container">
<img class="col-img" src="https://dummyimage.com/300x150/000/fff" alt="">
<p class="col-text">Букети</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="container">
<img class="col-img" src="https://dummyimage.com/300x150/000/fff" alt="">
<p class="col-text">Букети</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="container">
<img class="col-img" src="https://dummyimage.com/300x150/000/fff" alt="">
<p class="col-text">Живі квіти</p>
</div>
</a>
</li>
</ul>
I'm having trouble putting an icon to the very right of my centered brand text without shifting the brand text.
Right now, the text is centered at the top. I want to add an icon to the very right of it.
Currently, it looks like this
And I want it to look like this
My current code:
<nav class="navbar navbar-expand-lg fixed-top justify-content-center">
<a class="navbar-brand text-center">
<span class="text-strong">
Brand
</span>
</a>
</nav>
I considered just doing 3 columns and centering the brand text in the center column while putting the icon in the right column, but I don't have anything to put in the left column.
An easy way to add the image without affecting the centered brand name is to set the position of the image to absolute. that way is basically acting on its own and does not care about the brand name. but if you do this then you have to make sure to position it correctly.
Here is a solution I came up with that uses the absolute positioning of the image.
you might have to mess around with the margin of your image when you put one on there. but this should work. also, I only added the border to show where they were.
.container {
display:flex;
justify-content: center;
padding-top: 1vw;
padding-bottom: 1vw;
}
.brand {
display:flex;
border: 2px solid;
margin: auto;
text-align:center;
}
.brandLogo {
border: 2px solid;
display:flex;
position:absolute;
right:1vw;
}
<nav class="navbar navbar-expand-lg">
<div class="container">
<div class="brand">
<h1>Brand</h1>
</div>
<div class="brandLogo">
<img src="#" alt="brandLogo">
</div>
</div>
</nav>
You could also use Grid Templates which in my opinion, look much cleaner and easier to use.
.container {
font-size: 18px;
min-height: 100%;
width: 100%;
display: grid;
text-align: center;
grid-template-columns: .5fr 2.5fr .5fr;
grid-template-rows: 1fr;
grid-gap: 10px;
grid-template-areas:
"...... brand logo";
}
.brand {
grid-area: brand;
border: 2px solid;
padding: .5rem;
font-size: 3rem;
}
.brandLogo {
grid-area: logo;
border: 2px solid;
}
<nav class="navbar navbar-expand-lg">
<div class="container">
<div class="brand">
Brand
</div>
<div class="brandLogo">
<img src="#" alt="brandLogo">
</div>
</div>
</nav>
you can add an empty flex item before flex box!
<nav class="navbar navbar-expand-lg fixed-top justify-content-center">
<a class="navbar-brand text-center">
<span class="text-strong">
Brand
</span>
</a>
<div class="icon">
<img src='icon.svg' />
</div>
</nav>
in your css put this styles:
//flex container
.navbar{
display: flex;
justify-content: space-between;
}
//flex items
.navbar:before {
content:'';
flex-basis: 33.3333%;
}
.navbar-brand, .icon {
flex-basis: 33.3333%;
display: flex;
}
.navbar-brand {
justify-content: center;
}
.icon {
justify-content: flex-end;
}
I am trying to center the content of a navbar for mobile devices.
It should have 3 divs, the far left div should be the 3 bars for menu expansion (hamburger), the middle div should contain the logo, and the far right div should contain 3 inputs.
The problem is it is centering horizontally based on the left edge of the far right div. [= LOGO input input input] but it looks like this
[= LOGO input input input] if I take out all but 2 inputs
[= LOGO [input] it works perfectly but with 3 inputs it does not.
I have tried everything can anyone give me a clue as to why this won't work?
thanks
#media screen and (max-width: 1023px) and (min-width: 300px) {
#hidden-nav {
justify-content: space-between;
height: 8vh;
background-color: rgb(101, 0, 0);
display: flex;
padding: 8px;
min-width: 80px;
position: fixed;
width: 100%;
z-index: 10002;
}
}
#hidden-nav input {
max-width: 15vw;
}
body {
}
#hidden-nav:first-child {
/* padding-left: 2em;
border: 20px solid blue;*/
}
.bar {
width: 25px;
height: 2px;
background-color: white;
margin: 6px 0;
}
#container-for-right-hidden-nav {
border: 2px solid blue;
display: flex;
}
<div id="hidden-nav" style="border-bottom: 1px solid white; align-items:">
<div class="" onclick="toggleSidebar()">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div style=""> <img height="35" width="50" src="https://seohackercdn-seohacker.netdna-ssl.com/wp-content/uploads/2011/07/Link-Searching.jpg?x68951" alt="logo" /> </div>
<img height="35" width="50" src="https://seohackercdn-seohacker.netdna-ssl.com/wp-content/uploads/2011/07/Link-Searching.jpg?x68951" alt="logo" />
</div>
<div id="container-for-right-hidden-nav">
<a href="/">
<input type="button" style="background-color: dodgerBlue;" value="floorplans">
</a>
<a href="/">
<input type="button" style="background-color: green;" value="apply">
</a>
<a href="/">
<input type="button" style="background-color: #003059;" value="contact">
</a>
</div>
Try justify Content center and align-items center.
Hope it Helps.
#hidden-nav {
display: flex;
justify-content: center;
align-items:center;
height: 8vh;
background-color: rgb(101, 0, 0);
padding: 8px;
min-width: 80px;
position: fixed;
width: 100%;
z-index: 10002; }
}
I want to add padding top to ::after and want to make it centered.
But it's not happening, this is what I get :
After using this css :
.list-unstyled li::after {
content: url(images/heartborder.png)
text-align:center;
padding-top: 30px;
}
and this is my HTML CODE :
<li>
<div class="col span-1-of-3 box">
<span class="icon-small">
<i class="fa fa-eye" aria-hidden="true"></i>
<div class="details">
<h5 class="heading">View / Edit Profile</h5>
<p>You can view or edit your profile from here. Phone no., address, other information etc. etc.</p>
</div>
</span>
</div>
</li>
Your :after is set by default to display: inline so padding has no effect on it. Change it to inline-block or block and then it will.
To center it (as requested in comments), use flex on the div as below:
div {
width: 50px;
height: 50px;
background: green;
display: flex;
justify-content: center;
}
div:after {
content: "";
width: 20px;
height: 20px;
background: blue;
display: inline-block;
padding-top: 5px;
}
<div></div>
you need to add semicolon after content: url(images/heartborder.png) attribute
OR
I think you need to do like this:
.list-unstyled li::after {
content: url(images/heartborder.png);
text-align: center;
padding-top: 30px;
}
Use display:block or display:inline-block to apply padding or margin. add margin:0 auto to get center.
.list-unstyled li::after {
content: url(images/heartborder.png) 0 0 no-repeat;
text-align: center;
padding-top: 30px;
display: block;
margin: 0 auto;
}
<li>
<div class="col span-1-of-3 box">
<span class="icon-small">
<i class="fa fa-eye" aria-hidden="true"></i>
<div class="details">
<h5 class="heading">View / Edit Profile</h5>
<p>You can view or edit your profile from here. Phone no., address, other information etc. etc.</p>
</div>
</span>
</div>
</li>