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
Related
I need help preventing my hero image from stretching on larger screens. It's probably a simple fix but I can't seem to make it happen.
It works fine when I make the screen smaller and on mobile as it reduces with flexbox.
Here's a screenshot of the image:
.hero {
width: 100%;
height: 360px;
background-color: #222222;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1000;
/* padding: 20px 50px; */
padding-bottom: 10px;
gap: 50px;
/* background-image: url('../images/elvis.jpeg'); */
/* opacity: 50%; */
}
.movie-details {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
z-index: 1000;
padding: 20px;
}
.bg-image {
position: absolute;
width: 100%;
height: 100%;
}
.banner-img {
opacity: 40%;
height: 100%;
width: 100%;
object-fit: cover;
aspect-ratio: 16 / 9;
}
h1 {
padding-top: 20px;
font-size: 30px;
}
p {
font-size: 14px;
}
<div class="hero">
<div class="bg-image">
<img src="https://via.placeholder.com/800" class="banner-img" />
</div>
<div class="movie-details">
<h1>Movie Title</h1>
<p>Movie overview.</p>
</div>
</div>
Add object-position to .banner-image to control the image's anchor point around which it scales. I think you probably want object-position: center top; or maybe object-position: left top;
.banner-img {
opacity: 40%;
height: 100%;
width: 100%;
object-fit: cover;
aspect-ratio: 16 / 9;
object-position: center top;
}
(Original Answer)
Add a `max-width` and set horizontal margins to `auto` to center it.
.hero {
max-width: 800px;
margin: 0 auto;
}
I have a main container that contains an image and a div. What I want to achieve is to center the div on top of the image without having to use absolute or relative positioning on it. How can I achieve this? Thanks in advance.
.imgCon {
display: flex;
width: 95%;
height: 95%;
margin: auto;
background-color: blue;
}
.imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
border-radius: inherit;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 30%;
height: 30%;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
}
<div class="imgCon">
<!--center this-->
<div class="iconCon">
C
</div>
<img src="https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg" />
</div>
The only way I can think of without using absolute positioning or changing your markup is to use a CSS Grid and make both elements occupy the same cell.
.imgCon {
display: flex;
width: 95%;
height: 95%;
margin: auto;
background-color: blue;
display: grid;
}
.imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
border-radius: inherit;
grid-column-start: 1;
grid-row-start: 1;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
grid-column-start: 1;
grid-row-start: 1;
}
<div class="imgCon">
<img src="https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg" />
<!--center this-->
<div class="iconCon">
C
</div>
</div>
You could use background-image property and tiny styling changes.
.imgCon {
display: flex;
justify-content: center;
align-items: center;
width: 20rem;
height: 20rem;
margin: auto;
background-color: blue;
background-image: url("https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 80%;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 3rem;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
}
.container {
display: flex;
justify-content: center;
align-item: center;
}
<div class="imgCon">
<div class="container">
<!--center this-->
<div class="iconCon">
C
</div>
</div>
</div>
I am creating a resizable textbox that can stretch vertically and horizontally without warping graphical corner elements. To do so, I am using three vertical sections (top, center, bottom) and three horizontal sections (left, middle, right) within the top and bottom vertical sections. This way, the 'top-middle' and 'bottom-middle' sections can stretch horizontally and the center section can stretch vertically & horizontally, while the corner sections (top-left, top-right, bottom-left..) stay the same width and height to avoid warping.
The problem is: positioning elements so that they line up with one another. Specifically, I seem to be getting some cut-off on the right sides of my corner elements.
Here's a screenshot of the issue:
https://postimg.cc/Xp4dRDrQ
Here is the HTML:
<div className='textbox-container'>
<div className='top-block'>
<div className='left-block' />
<div className='middle-block'>
<p>
Top Block
</p>
</div>
<div className='right-block' />
</div>
<div className='center-block'>
<p>
Center Block
</p>
</div>
<div className='bottom-block'>
<div className='left-block' />
<div className='middle-block'>
<p>
Bottom Block
</p>
</div>
<div className='right-block' />
</div>
</div>
And here is the CSS I am using:
.textbox-container {
display: flex;
flex-flow: column;
align-items: center;
width: 75%;
margin: 0 auto;
}
.top-block {
display: inline-flex;
flex-direction: row;
float: left;
width: 100%;
height: 80px;
margin:0 auto;
margin-top: 10vh;
}
.top-block .left-block {
background-image: url('/src/images/Textbox-Top-Left.png');
background-repeat: no-repeat;
background-size: cover;
width: 150px;
height: 80px;
margin:0 auto;
}
.top-block .middle-block {
width: 100%;
height: 80px;
line-height: 80px;
text-align: right;
vertical-align: middle;
background-image: url('/src/images/Textbox-Top-Middle.png');
color: #fff;
margin:0 auto;
}
.top-block .right-block {
float:right;
background-image: url('/src/images/Textbox-Top-Right.png');
background-repeat: no-repeat;
background-size: cover;
width: 150px;
height: 80px;
margin:0 auto;
}
.center-block {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
width: 100%;
height: 800px;
background-image: url('/src/images/Textbox-Center.png');
background-repeat: repeat-y;
background-size: contain;
margin: 0;
}
.bottom-block {
display: inline-flex;
flex-direction: row;
float: left;
width: 100%;
height: 80px;
margin-bottom: 20vh;
}
/* Close but no cigar with magic numbers in bot sections: */
.bottom-block .left-block {
width: 220px;
height: 80px;
background-image: url('/src/images/Textbox-Bottom-Left.png')
}
.bottom-block .middle-block {
width: 100%;
line-height: 80px;
text-align: right;
padding-right: 5vw;
vertical-align: middle;
height: 80px;
background-image: url('/src/images/Textbox-Bottom-Middle.png');
color: #fff;
margin: none;
}
.bottom-block .right-block {
float:right;
width: 220px;
height: 80px;
background-image: url('/src/images/Textbox-Bottom-Right.png')
}
Fiddle (currently not working):
https://jsfiddle.net/edmundw/6xku4qwa/6/
Fiddle collaborate invite:
https://jsfiddle.net/edmundw/6xku4qwa/4/#&togetherjs=4VMz2rGNAo
Any solutions would be greatly appreciated as I am stumped.
Many thanks for reading this far,
Betty.
Hm, I got something working by using actual img elements (which have an inherent width and height) for the individual sections, along with flexbox (specifically flex-basis, flex-grow and flex-shrink).
The only problem I can see is that the center element's background's borders are blurry. Not sure how to fix that, but other than that, it works. No border cutoff.
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.textbox-container {
width: min-content;
height: auto;
overflow: hidden;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
.textbox-vertical-block {
width: 100%;
max-width: 100%;
height: 80px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
.textbox-vertical-block>* {
width: auto;
height: 100%;
object-fit: fill;
}
.textbox-vertical-block>*:nth-child(2) {
flex-basis: auto;
flex-grow: 1;
flex-shrink: 0;
}
.textbox-center-block {
height: auto;
align-items: stretch;
background-image: url(https://i.postimg.cc/d3p7Nt38/Textbox-Center.png);
background-size: 100% 100%;
background-repeat: repeat;
}
.textbox-center-block.textbox-vertical-block>* {
height: initial;
}
.textbox-center-block>.textbox-block {
width: 6px;
}
.textbox-center-block>textarea {
width: auto;
height: auto;
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
margin: 16px;
padding: 16px;
}
<div class="textbox-container">
<div class="textbox-vertical-block">
<img class="textbox-block" src="https://i.postimg.cc/jDn9G5wH/Textbox-Top-Left.png" />
<img class="textbox-block" src="https://i.postimg.cc/qtfY0Ty9/Textbox-Top-Middle.png" />
<img class="textbox-block" src="https://i.postimg.cc/8FhYz0bs/Textbox-Top-Right.png" />
</div>
<div class="textbox-vertical-block textbox-center-block">
<img class="textbox-block" src="https://i.postimg.cc/xcrz8TS0/Textbox-Center-Right.png" />
<textarea></textarea>
<img class="textbox-block" src="https://i.postimg.cc/xcrz8TS0/Textbox-Center-Right.png" />
</div>
<div class="textbox-vertical-block">
<img class="textbox-block" src="https://i.postimg.cc/kD70BqzC/Textbox-Bottom-Left.png" />
<img class="textbox-block" src="https://i.postimg.cc/CdJW89pq/Textbox-Bottom-Middle.png" />
<img class="textbox-block" src="https://i.postimg.cc/dL1gjnJS/Textbox-Bottom-Right.png" />
</div>
</div>
EDIT #1: Removed the blur by using the same method used in the top and bottom sections (extra border and center images (the center image is 1x1 though, so could be easily replaced by background-color)). More flexbox foolery too
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'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/