I have this code inside a grid.
<div class="nav__logo nav__logo--height">
<a href="http://localhost/step-asia/">
<img src="assets/image/logo-1.png" alt="Step Asia Logo">
</a>
</div>
and this is the css style
.nav__logo {
border: 1px solid #f7b5b5;
text-align: center;
}
.nav__logo a {
display: table;
color: black;
text-transform: capitalize;
text-decoration: none;
}
.nav__logo--height {
height: 19px;
display: inline-block;
width: 100%;
}
.nav__logo img {
margin: 0 auto;
}
I tried using position property but its not the solution, there's a problem using it when resizing the screen. text-align doesn't works also since it's an image.
The DIV above is inside a grid column.
Can you give an idea. Revising the code is acceptable, just need idea.
use flex layout for container element
.nav__logo{
border: 1px solid #f7b5b5;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items:center;
align-content: center;
}
.nav__logo--height {
height: 19px;
width: 100%;
}
.nav__logo>a {
display: block;
color: black;
text-transform: capitalize;
text-decoration: none;
}
.nav__logo>img {
display: block;
}
Hello hope it helps use the below code I used css justify-content: center; to move the navigation logo center
.nav__logo {
border: 1px solid #f7b5b5;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
<html>
<body>
<div class="nav__logo nav__logo--height">
<a href="http://localhost/step-asia/">
<img src="http://quesa.sourceforge.net/other/files/logo_small.jpg" alt="Step Asia Logo">
</a>
</div>
</body
</html>
The issue is caused by
.nav__logo a {
display: table;
you want to change that to display: inline; or display:block; or display: inline-block
pretty much "table" is the only value that wont do what you want it to do.
Add a text-align:center in your a tag so that the image will be in center.
.nav__logo a {
display: table;
color: black;
text-transform: capitalize;
text-decoration: none;
text-align:center;
}
Here is an example Jsfiddle
To center the image remove display: table; from a tag or make it display: inline-block;
.nav__logo {
border: 1px solid #f7b5b5;
text-align: center;
}
.nav__logo a {
color: black;
text-transform: capitalize;
text-decoration: none;
}
.nav__logo--height {
height: 19px;
display: inline-block;
width: 100%;
}
.nav__logo img {
margin: 0 auto;
<html>
<head>
<style>
.nav__logo {
border: 1px solid #f7b5b5;
position: absolute;
top: calc(50% - 96px);/*image height*/
left: calc(50% - 284px);/*image width*/
}
</style>
</head>
<body>
<div class="nav__logo nav__logo--height">
<a href="http://localhost/step-asia/">
<img src="https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png" alt="Step Asia Logo">
</a>
</div>
</body>
</html>
Related
I need to show my header line as well as the logo.png at the same line. Here is my try.
<div class="header">
<a>Dashboard</a>
<div>
<a href="../test.php" > <img src="../assets/images/logo.png" width="50" height="50"/> <?php echo htmlspecialchars($_SESSION["username"]); ?></a>
<i class="fa fa-toggle-left"></i> logout
</div>
</div>
I could see the png image but it has not nicely fit with the header bar. Here is the output
But I need to show Dashboard,username and the logout in a same line which goes through the middle of the image.
I will put my styles as below,
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
display: flex;
justify-content: space-between;
position: relative;
}
Can someone help me in this case?
Dashboard, james and logout should be in the same line,
Use align-items: center in your .header class to center everything vertically.
You can find more information about align-items here.
You set display flex in header class just you need to add a CSS property align-items: center; use the below code
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
display: flex;
justify-content: space-between;
position: relative;
align-items: center;
}
Flexbox is the right tool for this. You can easily align your items the way you need and want!
body {
margin: 0px;
}
div {
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: auto;
border-bottom: 1px solid black;
padding: 10px 5px;
}
.header>h4 {
margin: 0px;
}
.user-info {
display: flex;
align-items: center;
gap: 10px;
}
.user-info>img {
width: 35px;
height: 35px;
border-radius: 50%;
}
.user-info > button {
border-radius: 5px;
background-color: white;
color: black;
border: 1px solid black;
padding: 3px 10px;
}
<div class="header">
<h4>Dashboard</h4>
<div class="user-info">
<img src="https://i.stack.imgur.com/hS58k.jpg?s=256&g=1" />
<label>James</label>
<button>Logout</button>
</div>
</div>
So I am trying to create a logo and a menu icon in the header but for some reason, they are always overflowing the height of the header which I have strictly specified! Why is that ?
And I know I can hide out the overflowing items by using overflow:hidden; property but it is not always a good case.
For example, I tried to create a hamburger icon but I could not because of this overflow issue. The menu lines were working as if the entire element is shown but I had to hide it out so that it could fit into the header.
Here is the code -
<header>
<div class="logo">
Elvis
</div>
<div class="menu">
Hamburger Menu
</div>
</header>
In CSS -
*{
padding:0px;
margin:0px;
}
header{
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
border: 2px solid red;
}
.logo {
font-size: 33px;
text-decoration: none;
padding: 20px 30px;
background-color: green;
color: white;
}
.menu {
height: 100px;
width: 100px;
background-color: #bd4439;
}
Here is the codepen link -
https://codepen.io/raghav-sharma333/pen/eYeZYGO
Here is the image of the issue -
Overflowing content
So I just want to know :
Why is it happening?
&
How can it be prevented?
Basically you are forcing your elements to be higher than the header itself by giving them static heights (height 100px on the menu and padding-top/bottom 30px on the logo)
I updated your pen: https://codepen.io/penmasterx/pen/wvPGaGz
Using height 100%, so the elements adapt to the header.
Let me know if this solves your problem. If not, let me know in more detail what you're trying to accomplish.
What I added to the pen:
.logo {
height: 100%;
display: flex;
align-items: center;
/* removed padding top/bottom */
}
.menu {
height: 100%;
}
In such cases, it is better to use the position to manage the inheritance of the elements
I modified your code:
*{
padding:0px;
margin:0px;
}
header{
height: 60px;
align-items: center;
border: 2px solid red;
position: relative;
}
.wrapper{
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
position: absolute;
}
.logo {
font-size: 30px;
text-decoration: none;
padding: 20px 30px;
background-color: green;
max-height: 100%;
color: white;
}
.menu {
height: 100%;
width: 100px;
background-color: #bd4439;
}
<header>
<div class="wrapper">
<div class="logo">Elvis</div>
<div class="menu">Hamburger Menu</div>
</div>
</header>
First: the reason you use a 33px font which adds padding, then you use a height:100px on the menu while on your header you put a height:60px
you also need to add align-self: center on your flex-box
*{
padding:0px;
margin:0px;
}
header{
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
align-self: center;
border: 2px solid red;
}
.logo {
font-size: 17px;
text-decoration: none;
padding: 20px 30px;
background-color: green;
color: white;
}
.menu {
height: 60px;
width: 100px;
background-color: #bd4439;
}
I did it like 'Ali Memar' answer but the difference is the position of the texts. they are now in the middle of the div.
*{
padding:0px;
margin:0px;
}
header{
height: 60px;
align-items: center;
border: 2px solid red;
position: relative;
}
.wrapper{
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
position: absolute;
}
.logo {
font-size: 30px;
text-decoration: none;
padding: 20px 30px;
background-color: green;
max-height: 100%;
color: white;
text-align: center;
display: flex;
align-items: center
}
.menu {
height: 100%;
width: 100px;
background-color: #bd4439;
text-align: center;
display: flex;
align-items: center
}
<header>
<div class="wrapper">
<div class="logo">Elvis</div>
<div class="menu">Hamburger Menu</div>
</div>
</header>
I know this is probably a basic question but so far I have not been able to resolve it via google:
I want to have a navbar with an Image (a logo) and 3 links on its right. I want them all to have the same height and to be on the same height, a little bit like this:
however all I manage is to make it look like this:
#nav-bar {
position: fixed;
top: 0px;
width: 100%;
background: #b7b7b7;
border: 1px #4c4c4c solid;
padding: 1em;
}
#flex {
display: flex;
justify-content: start;
flex-wrap: wrap;
align-content: center;
}
img {
margin-top: 20px;
height: auto;
width: 15%;
}
.nav-link {
border: 1px solid #4c4c4c;
padding: 0.5em;
background-color: #b7b7b7;
color: black;
text-decoration: none;
}
<nav id="nav-bar">
<div id="flex">
<div><img src="https://i.pinimg.com/originals/58/c8/82/58c88275c1a3389a7260baf05bf34e9a.jpg" alt="violin logo" id="header-img"></div>
Products
Demo
Newsletter
</div>
</nav>
Maybe something like this:
#nav-bar {
position: fixed;
top: 0px;
width: 100%;
background: #b7b7b7;
border: 1px #4c4c4c solid;
padding: 1em;
}
#flex{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: center;
}
img {
height: 50px;
width: auto;
}
.nav-links {
padding-right: 50px;
}
.nav-links .nav-link {
border: 1px solid #4c4c4c;
background-color: #b7b7b7;
color: black;
height: 50px;
display: inline-block;
text-decoration: none;
}
<nav id="nav-bar">
<div id="flex">
<img src="https://i.pinimg.com/originals/58/c8/82/58c88275c1a3389a7260baf05bf34e9a.jpg" alt="violin logo" id="header-img">
<div class="nav-links">
Products
Demo
Newsletter
</div>
</div>
</nav>
Just wrap links into a div, then set justify-content to 'space-between' and set the same height of both image and div with links. Hope it will help
You almost did it, the only thing you needed was basically to size the <div> around the <img> appropriately, so the <img> could just fill it:
#nav-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #b7b7b7;
border: 1px #4c4c4c solid;
padding: 1em;
box-sizing: border-box; /* to exclude paddings&borders from width instead of adding them */
}
#flex{
display: flex;
justify-content: start;
align-items: stretch;
}
/* sizing the div with the img */
#flex > div {
width: 15%;
flex: 1 0 auto;
}
/* making the img filling this div */
img{
display: block;
width: 100%;
}
.nav-link{
border: 1px solid #4c4c4c;
padding: 0.5em;
background-color: #b7b7b7;
color: black;
text-decoration: none;
/* making links fill all the space, except some gaps between them */
flex: 1 1 auto;
margin-left: .5em;
/* centering the text in the links and making it responsive */
display: flex;
justify-content: center;
align-items: center;
font-size: calc(10px + 2vw);
}
<nav id="nav-bar">
<div id="flex">
<div>
<img src="https://i.pinimg.com/originals/58/c8/82/58c88275c1a3389a7260baf05bf34e9a.jpg" alt="violin logo" id="header-img">
</div>
Products
Demo
Newsletter
</div>
</nav>
How can i center image in any div in HTML & CSS ?
I have a nav bar that uses images as links for other pages, the nav bar is multiple divs each has an image and anther div contains a words, how can I center this img in the div
The CSS:
#Nav
{
height: 150px;
margin-top: 50px;
}
#Nav ul
{
list-style-type: none;
padding: 50px;
padding-top: 0px;
width: 100%;
}
#Nav li
{
float: left;
font-size: 12px;
font-weight: bold;
letter-spacing: 0;
margin: 30px;
}
#Nav a
{
display: inline-block;
padding: 5px;
width: 70px;
height: 100px;
color: black;
text-decoration: none;
}
#Nav a:hover
{
border: 2px solid #ddd;
border-radius: 4px;
box-shadow: 0 0 2px 1px rgba (0, 140, 186, 0.5);
}
#img img
{
align-self: middle;
width: 50px;
height: 50px;
}
#desc
{
margin-top: 15px;
text-align: center;
}
The html:
<li> <a target="_blank" href="#">
<div id="img"> <img src="C:/Users/hp1/Desktop/Website/Pictures/Accessories.jpg" alt="Accessories">
<div id="desc"> Accessories </div>
</div>
</a> </li>
You need to change your CSS for image like below:-
#img img
{
display: block;
margin: 0 auto;
}
You can see Many Demos Here-
Note that align-self is for elements inside a flexbox container which is not your case, you can try with text-align: center; on img.
Or if you wish to go full flexbox, set the img container to:
.containerClass {
display: flex;
flex-flow: column wrap;
justify-content: center;
}
With this setup align-self on the img is not need since justify-content on it's container will do.
Flexbox to the rescue:
.parent {
width:200px; height:200px;
border:2px solid #000;
display: flex; /* Make it flex */
flex-direction: column; /* wrap children elements to columns */
align-items: center; /* Center children horizontally */
justify-content: center; /* Center children vertically */
}
<div class="parent ">
<img src="http://placehold.it/100x100/cf5">
<p>Green-ish</p>
</div>
<div class="parent ">
<img src="http://placehold.it/100x100/5fc">
<p>Blue-ish</p>
</div>
align-self: center; is valid, align-self: middle; is not valid.
However, you can probably achieve what you're wanting with text-align: center;. Despite it being an image, you can still center using text-align as images are, by default, inline elements just like text.
#img img
{
align-self: center;
width: 50px;
height: 50px;
}
OR
#img img
{
text-align: center;
width: 50px;
height: 50px;
}
First you have to change the nature of div to table then make its align to center like this
#img img
{
display:table;
align: center;
width: 50px;
height: 50px;
}
I have 6 divs that each contain a <p> and a link, and I want them to both be centered, with the <p> at the top and the link at the bottom. This is my html (it's basically the same for all 6):
<div id="home">
<p>P</p>
<a class="nav" href="index.html">home</a>
</div>
(all 6 are wrapped in a <header>)
This is my css:
header div {
width: 133.33px;
height: 145px;
text-align: center;
font-size: 18px;
padding-bottom: 3px;
font-weight: lighter;
float: left;
display: table;
}
header div a {
text-decoration: none;
color: #474747;
vertical-align: bottom;
text-align: center;
display: table-cell;
}
header div p {
font-size: 60px;
padding: 0;
text-align: center;
vertical-align: top;
display: table-cell;
}
I can't get the text-align: center to work at the same time as the vertical-align. Is there anyway to get the top/bottom positioning without using vertical-align, or to get the text-align to work?
Here's the code you're looking for, I hope: (These are not the droids you're looking for)
.wrapper {
text-align: center;
height: 200px;
width: 200px;
border: 1px solid black;
display: table;
}
.container {
display: table-cell;
vertical-align: bottom;
}
<div class="wrapper">
<div class="container">
<p>Hello World!</p>
I am a Link!
</div>
</div>
following Alohci's comment, if you'd like the <p> tags at the top and <a> tags at the bottom you should use the position property as follows:
.wrapper {
position: relative;
text-align: center;
height: 200px;
max-height: 200px;
width: 200px;
max-width: 200px;
border: 1px solid black;
display: table;
}
.container p {
display: inline;
vertical-align: top;
}
.container a {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<div class="wrapper">
<div class="container">
<p>Hello World!</p>
I am a Link!
</div>
</div>
Use Following CSS,
You Can Get a <p> and a link both be at centered,
div {
width: 133.33px;
height: 145px;
text-align: center;
font-size: 18px;
padding-bottom: 3px;
font-weight: lighter;
float: left;
display: table;
}
div a {
text-decoration: none;
color: #474747;
vertical-align: middle;
display: table-cell;
}
div p {
font-size: 60px;
padding: 0;
text-align: center;
}
Here is the Jsfiddle solution link.
http://jsfiddle.net/rbdqtxyf/