I have a div element and inside that I have an icon. I want to place the icon just below the value of the div element but it gets aligned to it horizontally on the same row:
.time {
width: 400px;
height: 400px;
border-radius: 50%;
font-size: 50px;
color: green;
line-height: 400px;
text-align: center;
margin: auto;
background: #000;
}
<div class="time" style="vertical-align: middle"
[style.color]="started ? 'green' : 'red'">
{{formatTime(time)}}
<i class="play icon"></i>
</div>
You can do it with the Flexbox:
.time {
display: flex; /* displays flex-items (children) inline, that's why you need to change its direction */
flex-direction: column; /* now stacked vertically */
justify-content: center; /* centers them vertically */
align-items: center; /* and horizontally */
width: 400px;
height: 400px;
border-radius: 50%;
font-size: 50px;
color: green;
/* not necessary
line-height: 400px;
text-align: center;
*/
margin: auto;
background: #000;
}
<div class="time" [style.color]="started ? 'green' : 'red'">
{{formatTime(time)}}
<i class="play icon">►</i>
</div>
Related
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>
I have met some problems while doing a image-viewer project. The problem is that my buttons and the image are not following justify-content property, which they don't distributed equally inside my div block, how could it be solved? Also the image is not centered as the title does despite I set the align item property. I dow know how to fix that. I've searched over the website for solutions but none of them seems working.
Could anyone help me, please? Thanks in advance.
Here are the html and css code:
<div class="image-viewer__container">
<div class="image-viewer__title">Image Viewer</div>
<div class="image-viewer__main">
<div class="image-viewer__button"><img src="./images/back.png" id="previous" /></div>
<div class="image-viewer__display" style="background-image: url(./images/loading.gif);background-repeat: no-repeat; background-position: center;">
<img src="https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-0/p640x640/119893827_3212042898922322_5684339818610522875_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=fGG3wRqLaLEAX8MrIY-&_nc_ht=scontent.ftpe7-2.fna&tp=6&oh=36c5e163223a1e8abca79a2b3892c915&oe=5F976AFF" id="display">
<div class="image-viewer__display-source-wrapper">
<span><a href="https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-0/p640x640/119893827_3212042898922322_5684339818610522875_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=fGG3wRqLaLEAX8MrIY-&_nc_ht=scontent.ftpe7-2.fna&tp=6&oh=36c5e163223a1e8abca79a2b3892c915&oe=5F976AFF" target="_blank">
https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-0/p640x640/119893827_3212042898922322_5684339818610522875_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=fGG3wRqLaLEAX8MrIY-&_nc_ht=scontent.ftpe7-2.fna&tp=6&oh=36c5e163223a1e8abca79a2b3892c915&oe=5F976AFF</a>
</span>
</div>
</div>
<div class="image-viewer__button"><img src="./images/next.png" id="next" /></div>
</div>
</div>
.image-viewer__container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.image-viewer__title {
font-size: 5rem;
font-weight: 600;
color: #615dec;
margin: 0;
margin-top: 2rem;
}
.image-viewer__main {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: auto;
}
.image-viewer__button {
display: inline;
background: none;
border: none;
border-radius: 50%;
}
.image-viewer__button img {
width: 80px;
height: 80px;
border: 1px solid transparent;
border-radius: 50%;
cursor: pointer;
}
.image-viewer__display {
position: relative;
padding: 15px;
margin: 3rem;
max-width: 80rem;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
font-size: 0.6rem;
}
.image-viewer__display-source-wrapper {
position: absolute;
font-size: 12px;
left: 50%;
margin-right: 50%;
transform: translate(-50%, -50%);
min-width: 100em;
text-align: center;
bottom: 0;
}
#display {
object-fit: contain;
width: 50rem;
height: 30rem;
margin-bottom: 1rem;
}
#source {
display: inline;
color: black;
}
This is because you've set a fixed width to your image. By setting the main image to 100% the image will fit and fill up the remaining space so the 3 elements are always distributed equally.
main image size = full width - both your arrows
current
#display {
object-fit: contain;
width: 50rem; /*fixed width*/
height: 30rem; /*fixed width*/
margin-bottom: 1rem;
}
amended
#display {
margin-bottom: 1rem;
width: 100%; /*was added*/
height: auto; /*was added*/
}
jsFiddle
Add css float:"right" in css button.
I have a list of network icons I am trying to show them in a circle with a white background. Here is what I have right now. I am trying to get the icon to fit into the circle .
.logo {
display: -ms-flexbox;
-ms-flex-align: center;
-ms-justify-content: center;
display: flex;
align-items: center;
overflow: hidden;
color: #1e1e1e;
width: 100%;
height: 100%;
max-height: 88px;
max-width: 88px;
margin: 0 auto;
background: url('/networks/network-logo-bg#2x.png') center center no-repeat;
background-size: contain;
img {
width: 80%;
font-size: 10px;
font-weight: 700;
text-align: center;
color: #000;
margin: 0 auto;
#include lazyLoad(null);
}
}
HTML:
<div key={index} className="logo">
<img className="lazyload" src={logo.icon} alt={logo.name}/>
</div>
I want the icon to be inside the circle and aligned to the center.
You can try something like this:
HTML:
<div class="circle">
<img src="https://image.flaticon.com/icons/svg/826/826356.svg">
</div>
CSS:
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: black;
display: flex;
justify-content: center;
}
img {
width: 50%;
}
Demo
I'm working on a website and wanted to see how I could vertically center h2 and the sub-heading with respect to the div that contains the image.
Basically, I have a container with display: flex and flex-direction: column. I have three columns.
The first column contains a profile image along with a header and sub-header. What's the best way to vertically center the .title div?
Here's a link to the jsfiddle
give display: flex to class profile-container, then you can align it's child profile image and title class to vertically center like below:
.profile-container{
display : flex;
align-items : center;
height : 200px; //provide wrapper height
}
This should achieve your requirement.
Try using absolute positioned, with a -50% transform.
#import url('https://fonts.googleapis.com/css?family=Lato');
html {
width: 100%;
height: 100%;
}
body {
background-color: #fafafa;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.container {
background: white;
width: 1000px;
height: 600px;
border: 1px solid rgba(0, 0, 0, .09);
box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
display: flex;
flex-direction: column;
}
/*set up vertical column layouts for the three containers*/
.profile-container,
.work-container,
.social-media-container {
flex: 1;
padding: 1.5rem;
}
.profile-container {
align-self: center;
position: relative;
width: 100%;
}
.profile-image {
display: inline-block;
background-image: url('https://organicthemes.com/demo/profile/files/2012/12/profile_img.png');
background-repeat: no-repeat;
background-position: 0px 0px;
background-size: 100%;
height: 200px;
width: 200px;
border-radius: 50%;
}
.title {
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
padding-left: 25px;
}
.header-name {
font-family: 'Lato', sans-serif;
display: inline-block;
margin: 0px;
}
<div class="container">
<div class="profile-container">
<div class="profile-image"></div>
<div class="title">
<h2>Tarang Hirani</h2>
<h6>Software Engineer</h6>
</div>
</div>
<div class="work-container">
These are my projects
</div>
<div class="social-media-container">
Social media link
</div>
</div>
Link for reference: https://jsfiddle.net/kzj4omo8/3/
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;
}