I want that .svg image to center inside my custom styled button.
.btn-close {
position: relative;
height: 30px;
border: 1px solid #e4e4e4;
width: 30px;
display: flex;
align-items: center;
margin-top: 1.5rem;
border-radius: 100%;
background-color: white;
}
My .jsx code:
<button className='btn-close' onClick={onClose}><img src={close}></img></button>
Try setting the margin property to auto
[Edit]: I have just seen that the display is set to flex on the button therefore you could try to use justify-content: center as well
Your code looks alright, you are just missing justify-content: center and your image would be in the center like you want.
In code:
.btn-close {
position: relative;
height: 30px;
border: 1px solid #e4e4e4;
width: 30px;
display: flex;
align-items: center;
margin-top: 1.5rem;
border-radius: 100%;
background-color: white;
justify-content: center;
}
Try this, Just some edit to your code. Your code works fine !.. For convenience, I'm just updating the snippet without React declarations.
.btn{
position: relative;
border: 1px solid black;
align-items: center;
margin-top: 1.5rem;
border-radius: 100%;
padding: 20px;
background-color: white;
}
img{
height: 50px;
}
<button class="btn">
<img src="https://cdn.onlinewebfonts.com/svg/img_206719.png" alt="X"/>
</button>
Hope it helps!!.. Happy Coding!!
Related
I want to change the inside color of a css so that it looks like this:
How i want it to look
How it looks so far:
Color i want to change
I've tried many things so that it looks like that, here is my html:
<div className="forms__highlightcolor">
<p>Highlight Color</p>
<input type="color" id="colorpicker" value="#0000ff"></input>
</div>
And the CSS i've made so far:
.forms__highlightcolor > input{
background: #F1F1F1;
width: 250px;
height: 35px;
border: 1px solid #F1F1F1;
border-radius: 20px;
}
.forms__highlightcolor > input[type="color"]::-webkit-color-swatch {
border: none;
width: 0px;
border-radius: 4px;
}
I want to change the inside color, but don't know how to do it.
Here is my code I hope this may help.
First You need to separate the input section and color has code section and wrap it inside a div.
#colorpicker {
border: 0;
padding: 0;
background: unset;
width: 30px;
height: 35px;
left: -5px;
position: absolute;
}
#colorpicker:hover {
cursor: pointer;
}
.color-input-wrapper {
display: flex;
align-items: center;
position: relative;
border-radius: 57px;
overflow: hidden;
width: 200px;
height: 25px;
position: relative;
background: #fdf8f5;
}
.color-input-wrapper:hover {
cursor: pointer;
}
.hash-code-section {
margin-left: 30px;
display: flex;
align-items: center;
flex:1;
margin-right: 10px;
text-transform: uppercase;
}
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-left: auto;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<div className="forms__highlightcolor">
<p>Highlight Color</p>
<div class="color-input-wrapper"><input type="color" id="colorpicker" value="#FF5733"></input>
<div class="hash-code-section">#FF5733 <i class="arrow down"></i></div>
</div>
</div>
I wanted to put a large character to center alignment in both vertical and horizontal. here are my styles and result
div {
border: 1px solid black;
border-radius: 50%;
width: 300px;
height: 300px;
margin: 150px auto;
text-align: center;
line-height: 300px;
}
span {
display: inline-block;
background-color: burlywood;
line-height: 0.5;
vertical-align: middle;
font-size: 300px;
}
<div><span>s</span></div>
here is the result
How can I put the 's' in the middle?
It looks like the css difference is with lower case letters:
div {
border: 1px solid black;
border-radius: 50%;
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
span {
display: inline-block;
vertical-align: middle;
background-color: burlywood;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 50%;
height: 50%;
font-size: 10em;
}
<div><span>S</span></div>
<div><span>s</span></div>
<div><span>M</span></div>
<div><span>m</span></div>
I have a div appearing on top of an image when I hover the image itself. The div contains two divs (buttons) that also have a :hover that changes their color and sets the cursor to the pointer.
The issue is the hovering on the button doesn't trigger the hover.
Also, it seems that hovering on the image at the bottom where the btn_container will appear doesn't trigger to first :hover and doesn't make the btn_container appear.
//HTML
<div class="container">
<img src="src">
<div class="btn_container">
<div class=" btn">
<p>Select</p>
</div>
<div class="btn">
<p>Preview</p>
</div>
</div>
//SCSS
.container {
position: relative;
width: 100%;
img {
width: 100%;
height: auto;
}
.btn_container {
position: absolute;
width: 100%;
height: 40px;
background-color: var(--dark-purple-trans);
bottom: 0;
left: 0;
align-items: center;
display: none;
position: absolute;
}
img:hover + .btn_container,
.btn_container > * {
display: flex;
border: none;
text-align: center;
justify-content: space-around;
}
.btn {
padding: 6px 12px;
height: 14px;
background: var(--yellow-medium);
border-radius: 8px;
display: flex;
justify-content: space-evenly;
align-items: center;
color: var(--white);
font-family: roboto;
&:hover {
cursor: pointer;
background: var(--red);
color: var(--white);
}
}
}
Preview, button hovering not working:
If I force the hover on the img using the inspector, the button hovering seems to work:
The problem is in classes img:hover + .btn_container and .btn_container > *.
Here is the updated scss:
.container {
position: relative;
width: 100%;
img {
display: block;
width: 100%;
height: auto;
border: 0;
}
&:hover .btn_container {
display: flex;
}
.btn_container {
position: absolute;
bottom: 0;
left: 0;
display: none;
align-items: center;
justify-content: space-around;
width: 100%;
height: 40px;
text-align: center;
background-color: var(--dark-purple-trans);
border: none;
}
.btn {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 14px;
padding: 6px 12px;
color: var(--white);
font-family: roboto;
background-color: var(--yellow-medium);
border-radius: 8px;
cursor: pointer;
&:hover {
color: var(--white);
background-color: var(--red);
}
}
}
You can view it in action here: Codepen
I tried using opacity instead of display to toggle visibility of the btn_container and added a hover to btn_container and it seemed to work: https://jsfiddle.net/pr8dxe2g/1/
.btn_container {
width: 500px;
height: 100px;
background-color: var(--dark-purple-trans);
bottom: 0;
left: 0;
align-items: center;
opacity: 0;
position: absolute;
}
img:hover + .btn_container,
.btn_container:hover,
.btn_container > * {
display: flex;
opacity: 1;
border: 1px solid blue;
text-align: center;
justify-content: space-around;
}
There may be some issue with your current code with the fact that the the img div has a higher stack-order if the display is set to none initially, however I am not certain so if anyone knows I would like to know why this is the case as well.
This is the css
body, html {
height: 100%;
width: 100%;
}
#container {
display: flex;
position: absolute;
flex-flow: column wrap;
justify-content: stretch;
align-items: center;
width: 100%;
height: 100%;
text-align: center;
background-color: black;
}
div.sections {
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: stretch;
margin: 0;
padding: 0;
width: 100%;
color: black;
background-image: linear-gradient(0, orange, gold);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
where #container is a sibling of div.sections, both directly under the body tag.
The problem is #container's height overflows the body by div.sections's height.
I have no idea what is the problem here or if it is related to flex. I do know how to solve it with javascript,
but I'd really like to see the solution in css.
I have tried to put a specific height value to your parent div.sections like height: 500px; and this will fix your problem. Thanks
div.sections {
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: stretch;
margin: 0;
padding: 0;
height: 500px; /* Height Value as you want */
width: 100%;
color: black;
background-image: linear-gradient(0, orange, gold);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
I have this simple div with a button inside of it. justify-content: center; works fine using Firefox and Chrome, but does not work on IE 11:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
}
<div id="div">
<button id="button">HELLO</button>
</div>
My goal is that, when I use transform with rotate(90deg) or rotate(270deg), the button will fit into the div:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
transform: rotate(90deg);
}
<div id="div">
<button id="button">HELLO</button>
</div>
The height and width of the div and button are always the same, but are customizable.
As much as possible, I prefer not wrapping elements.
IE11 needs the parent to have flex-direction: column.
This example has your button rotated:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
transform: rotate(90deg);
}
<div id="div">
<button id="button">HELLO</button>
</div>
In my case I had to make the flex container's height 100%. justify-content worked without a problem after that.
I also had to make the (first level) children's max-width 100% to fix some content overflowing horizontally.