I have been experiencing trouble centering a number within a circular shaped div. The coding I have used has worked for all other elements but for some reason, one number just won't center like the rest.
I have tried to narrow the problem down and the only thing I have found is that the font size seems to be the problem. In smaller font sizes, the number centers fine, larger sizes, the number sits to the left.
Is this a bug or something someone else has experienced?
HTML:
<div class="circle">
<div>4.</div>
</div>
CSS:
#how-can-we-help-section-two .info-box-four .circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
margin: 0 auto;
margin-bottom:-50px;
position:relative;
border: 7px solid #ebeced;
}
#how-can-we-help-section-two .info-box-four .circle div{
font-size: 35px;
font-weight:bold;
color: #fff;
line-height: 90px;
}
Problem is padding: 80px 40px 40px 40px; of .text-box.
You can solve your problem by position:absolute;.
#how-can-we-help-section-two .info-box-four .circle div {
font-size: 35px;
font-weight: bold;
color: #fff;
line-height: 90px;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
Its because of your surrounding wrappers behaviour.
You could use an absolute positioned div or you could replace line-height: 90px with width: 100%; height: 100%; display: inline-block; on your text div inside .circle
Related
I have created a container by <div> and I also pasted the pattern card and the image into the container. I am trying to put the text (under the name of class="under-name"beneath an image but the text is just sticking in the bottom without any effect.
I have been tried for several ways to move up the text but the text is just still locating in the same place.
The first thing I tried by setting with inline with moving the position by left or right. And I also tried to create the other new container with and it could not affect anything at all.
I want to move text beneath the image.
Please advise me the way to solve it.
enter image description here
.topcon {
background-color: #f6f5f5;
position: relative;
width: 250px;
height:250px;
border: 15px;
padding: 50px;
margin: 180px auto 150px auto;
border-radius: 20px;
}
.pattern-card
{
position: relative;
right: 50px;
border-radius: 20px 20px 0px 0px;
bottom: 50px;
}
.user-name{
position: relative;
width:40%;
left:0;
top:1000%
text-align: center;
margin: 0 auto 0 auto;
}
.victor{
position: relative;
background-color:#ffffff;
border:3px solid #ffffff;
border-radius: 50%;
display: inline-block;
margin-left: 50px;
margin-right: auto;
bottom: 110px;
width: 50%;
}
<div class="topcon">
<img class="pattern-card"src="images/bg-pattern-card.svg" alt="pattern card at the frame.">
<img class="victor"src="images/image-victor.jpg" alt="image for Victor">
<figcaption class="user-name">Victor Crest</figcaption>
26
London
80K
Followers
803K
Likes
1.4K
Photos
</div>
Try changing your 'user-name' class style to this
.user-name {
position: absolute;
width:40%;
left:20vh;
top: 20vh;
text-align: center;
margin: 0 auto 0 auto;
}
Add
bottom: 60px;
In .user-nameclass, adjusting the pixels until you have the position you are looking for.
It works as below. The most important is to you vh
This is my first time to use vh.
.user-name {
position: absolute;
width:40%;
left:20vh;
top: 20vh;
text-align: center;
margin: 0 auto 0 auto;
}
In my project, I have a button in the body of my div. When I resize the window, the button mysteriously disappears. I have searched for other solutions, however none have worked for me.
Here is my code:
.section-1 {
width: 100%;
height: 100vh;
position: relative;
background: url("https://udodjfjfjfoeoeo.com.dekffrfr") no-repeat center center/cover;
}
.main-signup-btn {
background-color: transparent;
position: relative;
border: 1px solid white;
height: 60px;
width: 245px;
padding-bottom: 1px;
font-weight: bolder;
border-radius: 3px;
color: white;
font-weight: bolder;
top: 253px;
left: -680px;
}
<div class="section-1">
<div class="overlay-1"></div>
<button class="main-signup-btn">Sign up now, uue</button>
</div>
Anybody know the issue? Thank you.
In your css .main-signup-btn you absolutely positioned the button to -680px which sends the button offscreen. remove the - and use only 680px and your button will appear somewhere near the center or a little to the right depending on your screen width. you can completely remove the left: -680px; completely and see i positioned normal at the beginning of the div / screen. You can try this
.main-signup-btn {
background-color: transparent;
position: relative;
border: 1px solid white;
height: 60px;
width: 245px;
padding-bottom: 1px;
font-weight: bolder;
border-radius: 3px;
color: white;
font-weight: bolder;
top: 253px;
/* left: -680px; */ /* This line is sending the button offscreen to the left, change the value or remove completely */
}
I have this dot, filled or not (depending on putting inner-circle id), that i want to use on Slick Slider.
#outer-circle {
height: 100px;
width: 100px;
position: relative;
border-radius: 50%;
padding: 100px;
background: #fff;
border: 15px solid red;
color: red;
text-align: center;
font: 32px Arial, sans-serif;
}
#inner-circle {
position: absolute;
background: red;
border-radius: 50%;
height: 250px;
width: 250px;
top: 50%;
left: 50%;
margin: -125px 0px 0px -125px;
}
Here is JSFiddle:
https://jsfiddle.net/thirtydot/dQR9T/2637/
I want to put it in the slick slider classes + make it inside slider (not above/below it)
https://github.com/kenwheeler/slick/blob/master/slick/slick-theme.css
Anyone have idea how to do that to look like on the picture?
In slider that should be text (f.e. "Profesjonalizm") and that red svg thing on the left. Of course navbar isn't part of that slider.
Any help would be much appreciated!
set the navbar over the slider with position absolute, and float:left on the circles.
I have a content area in the middle of the page, which I am centering with margin: 0 auto;
Now I want to have a background effect on the page with several small cubes, that, when hovered change with some effects.
The hover effects work fine under or over the content area, but the problem is that the margin, which centers the content seems to disturb the recognition of the hovering, because when hovered over the cubes behind the margin of the content area, the hover selector doesn't work.
Thanks for any help!
EDIT: Here a code example: http://cssdeck.com/labs/dl3ojm0g
Some small changes in the CSS and it works well.
#content {
margin: 0 auto;
position:relative;
margin-top: 50px;
width: 700px;
height: 300px;
padding: 20px;
background-color: white;
border: 2px solid darkgray;
color: darkgray;
z-index:2;
}
#cubeHolder {
position: absolute;
top: 0;
left: 0;
z-index:1;
}
Just needed to position #content to relative and gave it a higher z-index comparing to #cubeHolder
Example : http://jsfiddle.net/nwrFa/6/
Position your content-container absolute. Then left: 50% and margin-left: -700px/2
#content {
position: absolute;
top: 50px;
left: 50%;
margin-left: -350px;
width: 700px;
height: 300px;
padding: 20px;
background-color: white;
border: 2px solid darkgray;
color: darkgray; }
Demo: http://jsfiddle.net/DerekL/gNkKx/
I am trying to push up the text in a div by 50%, and I tried
padding-bottom: 50px; /*div is 100px high*/
But it does not work.
padding-top: -50px;
This does not work too. Any work-around?
line-height:0px; pushes it up some, but I don't know how much and it's apparently not 50px as you want.
You can wrap the element in another container and position it like so:
HTML
<div class="container">
<div class="block">龍</div>
</div>
CSS (only showing modifications from your style)
.container{
position: relative;
}
.block {
position: absolute;
top: -50px;
}
DEMO
IF you are trying to center the text within the boxes, try the following:
div.block {
border: 1px solid black;
width: 100px;
height: 100px;
text-align: center;
font-size: 80px;
line-height: 80px;
overflow: hidden;
padding-top: 10px;
}
*{
box-sizing: border-box;
}
Try raising the text up with inline-block. Use a border to see where you are. By doing this you can see where margin-top can be adjusted up and how large it is.
<div style='display:inline-block;margin-top:-30px; border: 1px solid pink;'>
<font style='color:green;'>today </font>
</div>