I'd like my sizing and placments to be very clean.
My SVG outline is not exactly on it's edges. I can't put it in the place I want.
<div id="ticket-container">
<div id="ticket">
<object data="ticket.svg" type="image/svg+xml" id="ticket">
x
</object>
</div>
</div>`
#ticket-container{
width: 50%;
height: 100%;
display: inline-block ;
float: right;
box-sizing: border-box ;
padding-bottom: 11px;
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
color: whitesmoke !important;
}
#ticket{
background-color: #e00808;
width: 30%;
height: 45%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
#ticket-svg{
height: 21px;
display: inline-block;
}
Related
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>
The second div stacks on top of the first div and the first div invisible
How can i position it below the first div
.shop {
width: 100%;
height: 1000px;
background-color: #ffffff;
position: relative;
justify-content: center;
display: flex;
}
.bell {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
<div class="shop"></div>
<div class="bell">
<img src="bell.png" alt="">
</div>
Is this what you are trying to do ? :)
.shop {
width: 100%;
height: 1000px;
background-color: #000;
justify-content: center;
display: flex;
}
.bell {
background-color: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
img{
width : 30%;
}
<div class="shop"></div>
<div class="bell">
<img src="https://images.pexels.com/photos/1289845/pexels-photo-1289845.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</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'm trying to align the text within my h2 element. I would like it to be centered vertically within the div. I'm working in .NET MVC
My html: (this is the only part giving me trouble)
Specifically:
.banner-side-container {
height: 240px;
width: 180px;
vertical-align: middle;
}
.banner-side-container h2 {
margin: 0;
padding: 0;
text-align: center;
}
.view-teams-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: aqua;
border-radius: 20px;
}
.view-matches-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: darkorchid;
border-radius: 20px;
}
<td>
<div class="banner-side-container">
<div class="view-teams-banner">
<h2>View Teams</h2>
</div>
<div class="view-matches-banner">
<h2>View Matches</h2>
</div>
</div>
</td>
I've tried adding vertical-align: middle; to all 4 selectors with no success.
Further info: the text-align: center; worked perfectly.
You can use flex and add the following settings to the three elements wrapping the h2s and their parent elements as follows:
display: flex;
flex-direction: column;
justify-content: center;
.banner-side-container {
height: 240px;
width: 180px;
display: flex;
flex-direction: column;
justify-content: center;
}
.banner-side-container h2 {
margin: 0;
padding: 0;
text-align: center;
}
.view-teams-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: aqua;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.view-matches-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: darkorchid;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
<td>
<div class="banner-side-container">
<div class="view-teams-banner">
<h2>View Teams</h2>
</div>
<div class="view-matches-banner">
<h2>View Matches</h2>
</div>
</div>
</td>
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