I need to position elements inside of div, here is the current div:
https://imgur.com/a/JidHBQS
this is the the desired one:
https://imgur.com/a/ZfWbB7z
Here is the code of html and css
#channel-header * {
display: inline-block;
}
#channel-title {
position: absolute;
}
<div id="channel-header">
<img src="images/lfc-kanal.png" id="avatar-kanala">
<div id="channel-title">
<h3>LFCOfficial</h3>
<p>828,277 subscribers</p>
Subscribe 828K
</div>
</div>
I would recommend using flexbox to easily create the 3 columns and have vertical alignment.
#channel-header {
display: flex;
align-items: center;
/* Vertical alignment */
justify-content: flex-start;
/* Horizontal alignment */
}
img {
border-radius: 100%;
}
.button {
text-decoration: none;
color: white;
background-color: red;
border-radius: 50px;
padding: 1rem;
margin-left: auto;
}
#channel-title {
margin-left: 2rem;
}
<div id="channel-header">
<img src="https://via.placeholder.com/150x150" id="avatar-kanala">
<div id="channel-title">
<h3>LFCOfficial</h3>
<p>828,277 subscribers</p>
</div>
Subscribe 828K
</div>
Related
I have tried changing a bunch of things in the CSS with classes and id's, but nothing seems to make it so that both images will be on the far side of the screen (logo on the far left and profile on the far right).
Tried lots of different things like text-align and different justify-contents but nothing appears to work.
Here is the code:
.top-nav {
display: flex;
position: absolute;
background-color: blue;
opacity: 0.5;
height: 10%;
top: 0;
width: 100%;
left: 0;
padding: 0;
border: 0;
margin: 0;
list-style: none;
}
.top-nav div {
display: flex;
justify-content: space-between;
height: 100%;
margin: 0px;
padding: 0;
border: 0;
margin: 0;
}
<div class="top-nav">
<div style="flex-grow: 1"><img src="/textures/logo.svg"></div>
<div style="flex-grow: 1"><img src="/textures/profile.svg"></div>
</div>
justify-content right now does nothing, because it's set on a div that doesn't have display:flex on it.
If you want want the divs with images separeted, then put the justify-content:space-between on the div that has them i.e. the top-nav div.
The obvious answer is that you set the flex-items the top-nav div elements – the parents of the <img> elements – to expand to fill the availlable space; this means the <div> elements fill that space, and the <img> elements are aligned via the default text-align for the language defined by your browser.
Instead you could either remove the <div> elements, as they do little to help and bloat the HTML for no reason, and specify justify-content: space-between on the .top-nav element:
.top-nav {
display: flex;
background-color: blue;
justify-content: space-between;
}
<div class="top-nav">
<img src="https://placekitten.com/300">
<img src="https://via.placeholder.com/300">
</div>
Or, you could either retain the <div> elements and simply omit the flex-grow statement:
.top-nav {
display: flex;
background-color: blue;
justify-content: space-between;
}
<div class="top-nav">
<div><img src="https://placekitten.com/300"></div>
<div><img src="https://via.placeholder.com/300"></div>
</div>
Or simply use text-align on those <div> elements:
.top-nav {
display: flex;
background-color: blue;
justify-content: space-between;
}
.top-nav div:first-child {
text-align: left;
}
.top-nav div:last-child {
text-align: right;
}
<div class="top-nav">
<div><img src="https://placekitten.com/300"></div>
<div><img src="https://via.placeholder.com/300"></div>
</div>
References:
display.
flex-grow.
justify-content.
text-align.
Looking for a result similar to this?
.top-nav {
display: flex;
position: absolute;
background-color: blue;
opacity: 0.5;
height: 10%;
top: 0;
width: 100%;
left: 0;
padding: 0;
border: 0;
margin: 0;
list-style: none;
}
.top-nav .brand {
margin-right: auto; /* Push element to the left*/
}
.top-nav .profile {
margin-left: auto; /* Push element to the right */
text-align: right;
}
<div class="top-nav">
<div class="brand">
<img src="/textures/logo.svg">
</div>
<div class="profile">
<img src="/textures/profile.svg">
</div>
</div>
I want to give an explanation based on color of each dot below.
The whole page is:
My HTML code for the spesific area:
<div class="dot-expl">
<div class ="dot dot-red">Ended</div>
<div class ="dot dot-green">Running</div>
<div class ="dot dot-yellow">Ready to start</div>
</div>
My whole CSS code:
.dot-expl{
display: flex;
align-items: center;
overflow:visible;
}
.dot {
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
}
.dot-red {
background-color: red;
}
.dot-green {
background-color: green;
}
.dot-yellow {
background-color: yellow;
}
But the result is:
I cannot find how to give more space between the dots as so as the text can be visible
You could do it with this approach by using the pseudo class ::before
I set a margin to each .dot on both sides (left & right) to have some space between the individual elements.
You could also give your wrapper a fixed width and use justify-content on the wrapper. But I assume this will make you run into other problems depending on the length of the text.
.dot-expl {
display: flex;
align-items: center;
overflow: visible;
}
.dot {
margin: 0 5px;
display: flex;
align-items: center;
}
.dot::before {
content: '';
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
margin-right: 2px;
}
.dot-red::before {
background: red;
}
.dot-green::before {
background: green;
}
.dot-yellow::before {
background: yellow;
}
<div class="dot-expl">
<div class="dot dot-red">Ended</div>
<div class="dot dot-green">Running</div>
<div class="dot dot-yellow">Ready to start</div>
</div>
I'm currently designing a header bar for a site I'm working on. I would like the header to show a logo at the left, the title in the center, and the user account on the right.
This mockup is what I'm envisioning. Note that the dotted boxes denote a div.
I've made some progress on creating it in HTML/CSS, but I can't seem to get the title to center to the viewport.
As you can see, the title is centering itself between the logo and the account info divs, instead of centering itself on the viewport. This ends up making the page just look a little bit off, and so I would really like to center the title to the viewport.
Here's my code:
.headerBarArea {
background-color: #7785A2;
border: 0;
padding: 0;
width: 100%;
display: inline-block;
text-align: center;
}
.logoArea {
display: inline;
text-align: center;
float: left;
border: lawngreen;
border-style: dashed;
border-width: 1px;
}
.minesLogo {
width: 96px;
}
.titleArea {
display: inline-block;
text-align: center;
border: lawngreen;
border-style: dashed;
border-width: 1px;
}
.siteTitle {
color: white;
}
.pageTitle {
color: white;
}
.userAccountArea {
display: inline;
text-align: center;
float: right;
border: lawngreen;
border-style: dashed;
border-width: 1px;
}
.userAccountIcon {
float: left;
width: 35px;
}
.userAccountText {
float: right;
}
<div className="headerBarArea">
<div className="logoArea">
<img src="assets/mines_logo_stacked.png" className="minesLogo" />
</div>
<div className="titleArea">
<h2 className="siteTitle">This is my site Title</h2>
<h3 className="pageTitle">Page Title</h3>
</div>
<div className="userAccountArea">
<img src="assets/user_account.png" className="userAccountIcon" />
<span className="UserAccountText">John Smith (Student)</span>
</div>
</div>
Any ideas on what I could do to make the title div centered to the viewport, instead of centering between the two divs?
html code
<div class="flex-container">
<div class="flex-item">1</div>
<div class="align-self-center">
<span class="siteTitle">This is my site Title</span>
<br>
<div class="text-center ">Page Title</div>
</div>
<div class="flex-item align-self-end third-item">3</div>
</div>
CSS code
.flex-container {
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction
and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Then we define how is distributed the remaining space */
justify-content: space-between;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
text-align: center;
}
.third-item {
height: 100px;
}
.text-center{
text-align: center;
}
.align-self-end{
align-self:end;
}
.align-self-center{
align-self:center;
}
code output
code solution
used flex to place the items used .flex-container as parent div where flex items are placed in .justify-content: space-between; is used to place space in between the items. align-self:center; is used to place Page Title at center
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
codepen
.headerBarArea{
display:flex;
justify-content: space-between;
align-items: center
}
It is an easy way to the layout.
you can try it.
Try adding margin-left:auto; and margin-right:auto; to the .titleArea class .
I would suggest using a flex-box though.
Replace your css code with this to make title div centered in all the viewport.
.headerBarArea {
background-color: #7785A2;
border: 0;
padding: 0;
width: 100%;
display:flex;
justify-content: space-between;
}
.logoArea , .titleArea , .userAccountArea {
border: lawngreen;
border-style: dashed;
border-width: 1px;
}
.minesLogo {
width: 96px;
}
.titleArea {
text-align: center;
}
.siteTitle , .pageTitle{
color: white;
}
.userAccountIcon {
float: left;
width: 35px;
}
.userAccountText {
float: right;
}
I have a div, containing an image, and another div below it for description, am aligning them on top of each other with flexbox, however I have a hidden div that I want to show in place of the image when I hover over the tile, but currently my code is just not working and am unable to give this div the full height of the area on hover. Here's my code:
:root{
--colorOrange: #ef5b2b;
--colorGrey: #f5f5f5;
--colorBlue: #0a2756;
}
.presenter {
width: 23%;
max-height: 320px;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-bottom: 2rem;
}
.presenter img{
width: 100%;
}
.presenter-solid{
background: var(--colorBlue);
color: white;
font-weight: 700;
text-transform: uppercase;
font-family: Poppins;
display:none;
}
.presenter:hover img{
display:none;
}
.presenter:hover .presenter-solid{
display:block;
height: 100%;
}
<div class="presenter">
<div class="presenter-image-holder">
<img src="https://cdn2.vectorstock.com/i/thumb-large/80/91/person-gray-photo-placeholder-little-boy-vector-22808091.jpg" />
<div class="presenter-solid">
<span>TOM CRUISE</span>
</div>
</div>
<div class="presenter-role">
<span class="role-name">Hollywood Actor</span>
</div>
</div>
It's also giving me a flicker effect when trying to hover. How can I fix my code? What am I doing wrong?
use display: flex; align-items: center; justify-content: center to center the text.
:root{
--colorOrange: #ef5b2b;
--colorGrey: #f5f5f5;
--colorBlue: #0a2756;
}
.presenter {
display: inline-block;
position: relative;
margin-bottom: 20px;
}
.presenter-image-holder {
position: relative; /* this must be added to the parent element */
width: 250px; /* width of the image box */
height: 250px; /* height of the image box */
margin-bottom: 10px;
}
.presenter img{
max-width: 100%;
height: auto;
}
.presenter-solid{
background: var(--colorBlue);
color: white;
font-weight: 700;
text-transform: uppercase;
font-family: Poppins;
display:none;
}
.presenter:hover img{
display:none;
}
.presenter:hover .presenter-solid{
height: 100%;
width: 100%;
display: flex;
align-items: center; /* to vertically center the text */
justify-content: center; /* to horizontally center the text */
}
<div class="presenter">
<div class="presenter-image-holder">
<img src="https://cdn2.vectorstock.com/i/thumb-large/80/91/person-gray-photo-placeholder-little-boy-vector-22808091.jpg" />
<div class="presenter-solid">
<span>TOM CRUISE</span>
</div>
</div>
<div class="presenter-role">
<span class="role-name">Hollywood Actor</span>
</div>
</div>
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;
}