I feel like a complete noob with this question, but I cannot get anything to work. I have social media icons within my footer and I want to center them within the block they are in.
I have tried text-align: center and margin: 0 auto;. Neither has worked.
What should I do?
Just use following css will make you social icon to center withing block.
#footer-social-images {
display: flex;
justify-content: center;
}
Working Fiddle
Related
Basically my items start at the center, but I want even distribution so the first item starts not in the center but a bit to the left.
some css should do the job
.navbar.center .navbar-inner {
text-align: center;
}
This is a minimal example I could come up with, https://jsfiddle.net/o8emug03/15/.
Basically, you have to use a display: flex; justify-content: center; in your navbar, and append the elements you wish to display inside.
This is my site URL
In Inspect mode mobile view when I click on the last circle of heel, two circles appear on top of it. I want those two circles to appear at the center.
If I remove justify-content: space-between from the css, then those two circles appear at the center. However the first circle appears only partially in mobile view while scrolling horizontally. How to solve this problem?
Thanks
Add Justify Center to the div after .container height in style and mark it important
position: relative;
bottom: 215px;
justify-content: center !important;
After digging for quite a while i found the solution.
just give the container of the circles a padding left of 100px in the media query.
code :-
.row.align-center.justify-center {
padding-left: 100px;
}
I'm very new to website designing and have learned a bit of HTML and CSS.
I was following this website designing tutorial and halfway through it came across this tutorial on creating a CSS RESPONSIVE CARD HOVER EFFECT for the second section of my webpage.
https://www.youtube.com/watch?v=8b2mTq0Xrtw&ab_channel=OnlineTutorials
The problem I faced here is getting my images aligned at the body, and container tags because I already have them in my style sheet and when I make the changes he recommended, it messes up the alignment of my entire web design.
Are there alternatives tags I could use to work around this? I have tried using div class and setting a different name but it just doesn't work!
I know it's a fairly easy fix, but I've tried many things, even creating a second style sheet but it still doesn't seem to work!
You don't need the body styling that he put on the tutorial, it is just there
to center content on the screen so we can see it better.
If you have a .container class already in your code, you can always change the
name of the class to card-container or new-container or
whatever you think is suitable.
.card-container {
position: relative;
width: 1100px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 30px;
}
.card-container .card {
/*
Styling for card
*/
}
I am a beginner in HTML and web design, and I am making a simple header for my website. I have a logo image aligned to the left using float left. I also have a simple navigation bar including all the other web pages that I have on my website in the header, and it is also aligned, this time to the right, with float right. However, the webpage displays not in the way I want it. Instead, it displays like this:
As you can see, the navigation bar and image are all floated to the right and left respectively, but the navigation bar is clearly below the image and the title, instead of being on the same horizontal block. How can I change this? I want the navigation bar to be directed right of the title and image. I tried using display: inline but it did not work.
Thanks in advance...
Forget float. Use flex
.header {
display: flex;
justify-content: space-between;
}
Read about CSS flex-box layout. It will speed up your work and make it more pleasant.
pls adding header class
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
I can do percentages of left margin easy, but I can't get this div to center no matter what method I use.
Check it out here: http://www.fahrenheit-hvac.com/thank-you/
I'm trying to get the social div I created to center so as to remain responsive, but all of the solutions I've found online don't work.
Any help is greatly appreciated.
Jason C.
Try this:
#socialInPage {
text-align: center;
margin: 0;
}
#socialInPage a {
display: inline-block;
}
Set a width on the containing div (div#socialInPage). I used 275px, and it seemed to work. Then set the left and right margins to auto.
width: 275px;
margin: 0 auto;
So long as the text-align of parent elements is set to center, then this method will center elements on your page.