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;
}
Related
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
How to make a fixed positioned div fit its content width?
I've made a demo here
Before clicking on the Load button, the div must only have enough width to contain the gif image and the button.
When more content is loaded, the width of the div must fit its width.
here is the CSS I've made
body{background: #eee; }
#divToCenter{
border-radius: 5px;
box-shadow: 0 0 0 10px rgba(0,0,0,0.2);
background: #fff;
padding: 20px;
position: fixed;
top: 20px;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
max-width: 400px;
}
Since you are using JavaScript/jQuery to show/hide the loader, why don't you change the width of the box via JavaScript?
You could simply toggle a class called .wide for instance, to achieve the desired result as follows:
EXAMPLE HERE
CSS:
#divToCenter{
/* other declarations... */
text-align: center;
width: 50px;
}
#divToCenter.wide {
width: 400px;
text-align: left;
}
jQuery:
var $divToCenter = $("#divToCenter");
$("#show-more-data").click(function() {
// ...
$divToCenter.addClass("wide");
});
$("#show-less-data").click(function() {
// ...
$divToCenter.removeClass("wide");
});
Add display: table, position: relative and margin:0 auto to the following element:
#divToCenter{
border-radius: 5px;
box-shadow: 0 0 0 10px rgba(0,0,0,0.2);
background: #fff;
padding: 20px;
display: table;/*Add this*/
position: relative;/*Change fixed with relative*/
top: 20px;
margin:0 auto;/*Add this*/
max-width: 400px;
}
fiddle
Hello I had problem positioning a div to the center of the page.
CSS:
.fancyClass{
border: 1px solid #999;
border-radius: 10px;
display: inline-block;
margin: 0 auto;
}
Am I doing something wrong? Also I should mention that this div is inside another div, so could that be a problem? How to avoid it than?
Have you tried to enter the width to be smaller than the outer div?
Something like that:
.fancyClass{
width: 50%;
margin: 0 auto; <!-- that does the actual centering -->
#all the other attributes you have
}
Please Try this and let us know
HTML:
<div class="outterDiv">
<div class="innerDiv">
some thing here
</div>
</div>
CSS:
.outterDiv{
width: 100%;
background-color: #ccc;
padding: 25px;
}
.innerDiv{
width: 50%;
background-color: #eee;
margin: 0 auto;
text-align: center;
}
fiddle EXAMPLE HERE
here you can see the div is horizontally and vertically centered in page. Here is the Demo.
have a look at CSS.
body{margin:0 auto;
text-align:center;
}
.fancyClass{
border: 1px solid #999;
border-radius: 10px;
display: inline-block;
text-align:left;
width: 25%;
height: 25%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
<div class="fancyClass">
this text will be center
</div>
This should do the work:
margin-right:25%;
margin-left:25%;
tried text-align center and margin auto, both doesn't work and I do not want to used to use the 'margin hack' for centering..
http://jsfiddle.net/st9AM/1/
.circle{
float: left;
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
}
.inner{
float: left;
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #DDD;
}
First of all, using margin: auto; is not a hack
And to center your circle inside the circle, you can use positioning techniques, like position: absolute;. Here, I am using position: absolute; on the inner circle, than am assigning top and left properties with a value of 50% and than am using margin-top and margin-left and deducting 1/2 of the height and width.
Why am deducting 32px? As I already said am deducting exactly half the total width and height so this also includes the border of your element which is set to 2px which makes your element 64px in height and width respectively.
To vertical-align the + symbol, am using line-height property as I can only see a single character to be vertically aligned(you didn't said but technically I can assume what shape are you looking for), alternatively you can also use vertical-align: middle; but you need to set the container element to display: table-cell;
Demo
Last but not the least, you should nest the span tag inside the inner circle div.
.circle{
float: left;
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
}
.inner{
text-align: center;
line-height: 60px;
position: absolute;
top: 50%;
margin-top: -31px;
left: 50%;
margin-left: -31px;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #DDD;
}
Here's a cleaner solution.
with one HTML element only.
HTML:
<div class='circle'></div>
CSS:
*
{
margin: 0;
padding: 0;
}
.circle, .circle:after
{
border-radius: 50%;
border: 2px solid #DDD;
text-align: center;
}
.circle
{
width: 120px;
height: 120px;
font-size: 0;
}
.circle:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.circle:after
{
content:'+';
font-size: 20px;
padding: 20px 0; /* 2*padding + font size = innerCircle height*/
display: inline-block;
vertical-align: middle;
width: 50%;
}
You had "float: left" in the inner circle, which you didn't need
//float: left;
Working fiddle
remove float left and use margin: 0 auto;
.circle{
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
margin:0 auto;
}
Have a look at this fiddle. You wrote float:left; and wanted to center the image. Remove the float:left; and it works fine.
Current browsers (May-22) work with this (replace 261px and 165x by 50% of your image size... mine is 522px x 330px ):
{
position:absolute;
left: calc( 50% - 261px );
top: calc( 50% - 165px );
}
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; }