I am trying to center my logo it is in a div with the id "logocont" here is my css code no matter how i tried is stay stuck at the left if i put display block my navigation bar goes in another line and logo will be centered.
#logocont {
display: inline-block;
float: none;
align-content: center;
text-align: center;
margin : 0 auto;
overflow : visible;
}
Note: I am using grid layout I created the grids in another css file and i am linking it.
Here is my HTML code:
<div class="gr-16" id="menu">
<div id="logocont" class="gr-2">
<a href="#">
<img id="logo" src="images/mylogo21.png" alt="Logo" runat="server" />
</a>
</div>
<div id="navbar" class="gr-5">
<nav>
<a href="#">
Home
</a>
<a href="#">
Programmers
</a>
<a href="#">
Request Program
</a>
</nav>
</div>
</div>
Use display inline-flex for your logo container
#logocont {
display: inline-flex;
align-items: center;
}
This example centers a div in a div:
<html>
<style>
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
</style>
<div id="outer">
<div id="inner">Foo foo</div>
</div>
I used the following CSS to make a vertically and horizontally aligned div accordingly to what i understood from your HTML. May you check if this helps? (link to JSFiddle: https://jsfiddle.net/est02o5m/1/)
CSS:
.gr-16 {
display: grid;
}
.gr-2 {
grid-column: 2;
background-color: red;
border: 1px solid black;
grid-column-start: 1;
grid-column-end: 2;
}
.gr-5 {
grid-column: 5;
grid-column-start: 3;
grid-column-end: 8;
}
#logocont {
width:100%;
height: 200px;
display: inline-flex;
float: none;
align-content: center;
text-align: center;
margin : 0 auto;
overflow : visible;
border: 2px solid black;
background: #ccc;
align-items: center;
justify-content: center;
}
If the css that i used doesn't correspond to what you're using may you complement it and update your question?
I fixed this problem by removing the nav tag from the div as well as the logo so my code became:
<div class="gr-16" id="menu">
<nav id="navbar">
Home
Programers
Request Program
</nav>
<a href="#" id="logocont">
<img id="logo" src="images/mylogo21.png" alt="Logo" runat="server" />
</a>
</div>
and changed the css to:
#logocont {
width : 100px;
display : block;
margin : 0 auto;
}
Related
How can I align my icons left-horizontally and center-vertically without moving my text? For example:
Here is my code:
.leftpanel a {
display: block;
height: 65px;
text-align: center;
/* This also move my icons which I don't want to */
vertical-align: middle;
line-height: 65px;
}
<div class="leftpanel">
<img src="media/logo.png" class="logo">
<img src="media/icons/home.png" class="icons">acceuil
<img src="media/icons/sofa.png" class="icons">le grand salon
<img src="media/icons/shop.png" class="icons">boutique
</div>
You should wrap the text with an element that takes all available space, and also has text-align: center.
.menu a {
display: flex;
align-items: center;
}
.menu a span {
flex: 1;
text-align: center;
}
<div class="leftpanel">
<img src="media/logo.png" class="logo">
<div class="menu">
<a href="acceuil" class="acceuil">
<img src="media/icons/home.png" class="icons">
<span>acceuil</span>
</a>
<a href="le-grand-salon" class="le-grand-salon">
<img src="media/icons/sofa.png" class="icons">
<span>le grand salon</span>
</a>
<a href="boutique" class="boutique">
<img src="media/icons/shop.png" class="icons">
<span>boutique</span>
</a>
</div>
</div>
You can use flexbox to do it. Flexbox solves a lot of problems in general and I suggest you use it for layouts like this.
.leftpanel a {
display: flex;
height: 65px;
align-items: center;
line-height: 65px;
}
.leftpanel a img {
display: block;
flex-grow: 0;
}
.leftpanel a span {
display: block;
flex-grow: 1;
text-align: center;
}
<!-- I put the text in spans so we can style it separately -->
<div class="leftpanel">
<img src="media/logo.png" class="logo">
<img src="media/icons/home.png" class="icons"><span>acceuil</span>
<img src="media/icons/sofa.png" class="icons"><span>le grand salon</span>
<img src="media/icons/shop.png" class="icons"><span>boutique</span>
</div>
I'll try to align 3 Logos with the same height but with different widths on a row over the hole screen-width: The first image should be aligned at the left end of the screen, the third one should be aligned at the right end of the screen and the second one should float in between the other two images with the same space between them. The space should get smaller when the display gets smaller until it hit a defined minimum space. From there on if the display gets further smaller the hole row should scale down. I hope the image helps in clarify what I have in mind.
how it should look like
It's for a MailChimp Newsletter.
That is how far I got:
.my-logo-container{
width: 100%;
height: 80px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.my-logos{
flex: 1;
border: 1px solid red;
height: auto;
max-height: 100px;
}
<div class="my-logo-container">
<div class="my-logos">
<a href="https://via.placeholder.com/100x80.png">
<img src="https://via.placeholder.com/100x80.png">
</a>
</div>
<div class="my-logos">
<a href="https://via.placeholder.com/195x80.png">
<img src="https://via.placeholder.com/195x80.png">
</a>
</div>
<div class="my-logos">
<a href="https://via.placeholder.com/175x80.png">
<img src="https://via.placeholder.com/175x80.png">
</a>
</div>
</div>
Any Help is highly appreciated.
I have an alternative for you. Did you mean this?
.my-logo-container{
width: 100%;
margin:0;
}
ul.my-logos{
margin: 0;
padding: 0;
list-style: none;
}
ul.my-logos li{
width: 32.33333%;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin:0;
float: left;
text-align: center;
border:1px solid red;
}
ul.my-logos li a img{
max-width: 130px;
height:80px;
}
<div class="my-logo-container">
<ul class="my-logos">
<li>
<a href="https://via.placeholder.com/100x80.png">
<img src="https://via.placeholder.com/100x80.png">
</a>
</li>
<li>
<a href="https://via.placeholder.com/195x80.png">
<img src="https://via.placeholder.com/195x80.png">
</a>
</li>
<li>
<a href="https://via.placeholder.com/175x80.png">
<img src="https://via.placeholder.com/175x80.png">
</a>
</li>
</ul>
</div>
I came up with this solution: Instead of defining a minimum space in css I added more space into the images themselves. Now they can touch eachother and it still looks good. With display: flex; and justify-content: space-between; I arranged them in a row. With max-width: 100%; and height: auto; the Images auto-resizes on smaller screens. It works for me now.
.logo-container {
display: flex;
justify-content: space-between;
}
.logo {
max-width: 100%;
height: auto;
}
<div class="logo-container">
<img class="logo" src="https://via.placeholder.com/100x80.png">
<img class="logo" src="https://via.placeholder.com/195x80.png">
<img class="logo" src="https://via.placeholder.com/175x80.png">
</div>
I wanted the nav bar right at the top, to have the class with left on the left side, the class with middle right in the middle, and the class with right in the right side.
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.flex-container {
width: 100%;
}
.flex-container ul {
display: flex;
align-items: center;
justify-content: center;
}
.flex-container li {
border: 1px solid red;
}
.flex-container nav ul .nytl {
width: 189px;
height: 26px;
}
.flex-container nav ul .first {
justify-content: flex-start;
}
hr {
margin-top: 10px;
}
<div class="flex-container">
<nav>
<ul>
<li class="left">
<a href="#"><img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
</a>
</li>
<li class="left">
<a href="#"><img src="https://img.icons8.com/material-rounded/16/000000/search.png">
</a>
</li>
<li class="left">SPACE & COSMOS
</li>
<li class="middle"><img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl"></li>
<li class="right"><button>Subscribe</button> .
</li>
<li class="right"><button>Login</button></li>
</ul>
</nav>
<hr>
</div>
Try using auto margins to push the left and right elements away from the middle element.
(Also, since you're using the HTML5 nav element and CSS3 properties, you really don't need a ul to structure your layout. You can simplify your code substantially.)
nav {
display: flex;
align-items: center;
}
nav > * {
border: 1px solid red;
}
.nytl {
margin: 0 auto;
width: 189px;
height: 26px;
}
hr {
margin-top: 10px;
}
* {
padding: 0;
margin: 0;
}
<nav>
<a href="#">
<img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
</a>
<a href="#">
<img src="https://img.icons8.com/material-rounded/16/000000/search.png">
</a>
SPACE & COSMOS
<img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl">
<button>Subscribe</button>
<button>Login</button>
</nav>
<hr>
Learn more about auto margins here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
Here's another flex method you may find useful:
Aligning Three Divs Horizontally Using Flexbox
You may encounter another problem now: Because flex features such as auto margins, justify-content and align-items work by distributing free space, your middle item may not be perfectly centered. See these posts for more details and solutions:
Keep the middle item centered when side items have different widths
Center and right align flexbox elements
I would utilise the space-between option that flex brings with the justify-content property. You have to be careful of the way the code is listed for SEO purposes as opposed to placing anywhere and have the css reposition it all. It should cascade in natural order first.
.flex-thirds {
display: flex;
justify-content: space-between;
}
.flex-thirds .col {
width: 32%;
}
.nytl {
margin: 0 auto;
width: 189px;
height: 26px;
}
<div class="flex-thirds">
<div class="col">
<a href="#"><img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
</a>
<a href="#"><img src="https://img.icons8.com/material-rounded/16/000000/search.png">
</a>
SPACE & COSMOS
</div>
<div class="col">
<img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl">
</div>
<div class="col">
<button>Subscribe</button>
<button>Login</button>
</div>
</div>
You can find more about justify-content here at css-tricks
I'm really close to what I want, a 3 column layout where only the center content scrolls via the normal scrollbar.
My problem is the outside images/cols have background-attachment: fixed, which works, but I am so far unable to position the background images like I want.
The only way I have been able to make it work is by positioning the left one to the left and right one to the right (which is opposite of what I'm looking for). This makes the images spread as wide as possible as you widen the page, I would like to keep them tight and have their outside edges overflow when the page is width is lowered.
I can better show my desired effect with examples.
1.) This one has the background image scrolling fixed, but as the page widens, instead of hugging tight to the content in the center they move to the outsides. As they overflow, they do so to the insides - I'm looking for the opposite of these two behaviors.
https://codepen.io/xcr/pen/drNXPx
2.) This one below works perfectly except the background images aren't fixed and scroll with the content
https://codepen.io/xcr/pen/Jzbepo
The only difference in these examples should be the background-position and background-attachment properties in the CSS.
The html & css in the first example (close to working) is
html, body {
height: 100%;
margin: 0;
background-color: black;
font-family: Verdana;
}
.wrapper {
display: flex;
flex-direction: row;
justify-content: center;
background-color: #000;
height: 100%;
}
.leftTower {
background-attachment: fixed;
background-position: left top;
}
.rightTower {
background-attachment: fixed;
background-position: right top;
}
.side {
min-height: 775px;
flex-grow: 1;
background-repeat: no-repeat;
background-image: url("https://www.plaseebo.net/news/wp-content/uploads/2019/01/moonlight_gnaw_x_c-450x775.jpg");
}
.content {
max-width: 750px;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.mainContent {
background-color: #00ff00;
flex: 1;
}
.img-fluid {
max-width: 100%;
height: auto;
}
.text-center {
text-align: center;
}
#media only screen and (max-width: 750px) {
.side {
display: none;
}
}
<div class="wrapper">
<a href="http://www.example.com" target="_blank" class="side leftTower">
</a>
<div class="content">
<header class="text-center">
<img src="https://i.pinimg.com/originals/57/27/d7/5727d7e809ed08fb9cbda10b1f4a5e48.jpg" class="img-fluid" />
</header>
<main class="mainContent text-center">
This is the content area<br />
<div style="height: 220px;background-color: #0000aa;color: white;margin: 0 15px 0 15px;">
Taking up 220px of vertical space to show stick footer behavior
</div>
</main>
<footer class="text-center">
<img src="https://thecriticalcritics.com/review/wp-content/images/mid-noad.jpg" class="img-fluid" />
</footer>
</div>
<a href="http://www.example.com" target="_blank" class="side rightTower">
</a>
</div>
Using 04FS's suggestion and knowing the width of my center column and side images I was able to solve the issue with pure CSS and the calc() function in the background-position property.
Basically, take the width of the center column and the side image, divide the sum by 2 and use 50% in the calc() function to get the desired positioning and behavior of the side images.
Note the leftTower and rightTower class selectors
Below is the code and a working codepen
CSS
html, body {
height: 100%;
margin: 0;
background-color: black;
font-family: Verdana;
}
.wrapper {
display: flex;
flex-direction: row;
justify-content: center;
background-color: #000;
height: 100%;
}
.leftTower {
background-attachment: fixed;
background-position: calc(50% - ((728px + 450px) / 2)) top;
}
.rightTower {
background-attachment: fixed;
background-position: calc(50% + ((728px + 450px) / 2)) top;
}
.side {
min-height: 775px;
flex-grow: 1;
background-repeat: no-repeat;
background-image: url("https://www.plaseebo.net/news/wp-content/uploads/2019/01/moonlight_gnaw_x_c-450x775.jpg");
}
.content {
max-width: 750px;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.mainContent {
background-color: #00ff00;
flex: 1;
}
.img-fluid {
max-width: 100%;
height: auto;
}
.text-center {
text-align: center;
}
#media only screen and (max-width: 750px) {
.side {
display: none;
}
}
HTML
<div class="wrapper">
<a href="http://www.example.com" target="_blank" class="side leftTower">
</a>
<div class="content">
<header class="text-center">
<img src="https://i.pinimg.com/originals/57/27/d7/5727d7e809ed08fb9cbda10b1f4a5e48.jpg" class="img-fluid" />
</header>
<main class="mainContent text-center">
This is the content area<br />
<div style="height: 220px;background-color: #0000aa;color: white;margin: 0 15px 0 15px;">
Taking up 220px of vertical space to show stick footer behavior
</div>
</main>
<footer class="text-center">
<img src="https://thecriticalcritics.com/review/wp-content/images/mid-noad.jpg" class="img-fluid" />
</footer>
</div>
<a href="http://www.example.com" target="_blank" class="side rightTower">
</a>
</div>
https://codepen.io/xcr/pen/jJyeQy
In order to centrally position an <a> tag inside a <div> and have it fill the parent entirely I am using the markup and CSS in the snippet below:
.container {
align-items: center;
background: lightcoral;
border: 1px solid black;
display: flex;
height: 100px;
justify-content: center;
overflow: hidden;
width: 100px;
}
.contained {
background: lightblue;
padding: 100px;
}
<body>
<div class="container">
<a class="contained" href="#">1</a>
</div>
<div class="container">
<a class="contained" href="#">2</a>
</div>
<div class="container">
<a class="contained" href="#">3</a>
</div>
</body>
For the purposes of demonstration the <div>s have fixed sizes but ultimately they may change size slightly in different viewport sizes, hence giving the <a> tags large amounts of padding to ensure that they always cover the entire <div> whilst staying central. The colours are also only included to make it easier to see the effect.
When viewed in Chrome or Firefox (version 58.0.3029.110 [64-bit] and version 53.0 [64-bit] respectively, at time of writing) the <a> tags are positioned centrally, with the excess padding hidden by the parent <div> (you should be unable to see an red colouration, only blue). However, in IE11 the <a> tags are being pushed off to the right by their padding, which does not match the behaviour seen in Chrome and Firefox. Furthermore, adding flex-direction: column to the .container class causes the <a> tag to be pushed down instead of right, which suggests the issue is tied to flex-direction.
Is there a workaround for IE to make it behave in the same way as Chrome and Firefox?
In order for the anchor to fill the parent, you just need to add flex-grow:1, the use flex to centre it's content:
.container {
align-items: center;
background: lightcoral;
border: 1px solid black;
display: flex;
flex-direction: column; /* add this so your grow will make it grow to 100% height */
height: 100px;
width: 100px;
}
.contained {
background: lightblue;
flex-grow: 1; /* add this for 100% height */
align-self: stretch; /* add this for 100% width */
display:flex; /* the following is for centring your anchor content */
justify-content: center;
align-items: center;
}
<body>
<div class="container">
<a class="contained" href="#">1</a>
</div>
<div class="container">
<a class="contained" href="#">2</a>
</div>
<div class="container">
<a class="contained" href="#">3</a>
</div>
</body>
I think it will help you
No need to add hug value of padding you can use flex to get the same and you can check in IE it's working fine and your parent background: lightcoral; is hide now.
Here i attached IE screenshot and it's working fine.
Use flex to get it
.container {
align-items: center;
background: lightcoral;
border: 1px solid black;
display: flex;
height: 100px;
justify-content: center;
align-items: center;
overflow: hidden;
width: 100px;
}
.contained {
background: lightblue;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
align-self: center;
}
<div class="container">
<a class="contained" href="#">1</a>
</div>
<div class="container">
<a class="contained" href="#">2</a>
</div>
<div class="container">
<a class="contained" href="#">3</a>
</div>