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%;
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;
}
I can't seem to make an element move in CSS. It's a form with a background and it's centered. I can't see what I'm doing wrong.
#skyformbox {
width: 50%;
margin: 0 auto;
margin-top: 0px;
clear: both;
border: 3px solid #000000;
padding-top: 20px;
background: #ccc url(http://www.ultraframehomeimprovements.co.uk/wp-
content/uploads/2018/07/Sky-box.png);
overflow: auto;
padding: 5;
left: 2000px;
}
<div align="left">
<div id="skyformbox">
[gravityform id="12" title="false" description="false"]
</div>
</div>
Why are you positioning 2000px left? As far as I know the "left" property will only work if the positioning is set to absolute...
Anyway try this:
#skyformbox {
width: 50%;
margin-left: 0px;
margin-top: 0px;
clear: both;
border: 3px solid #000000;
padding-top: 20px;
background: #ccc url(http://www.ultraframehomeimprovements.co.uk/wp-content/uploads/2018/07/Sky-box.png);
overflow: auto;
padding: 5;
left: 2000px;
}
Setting the margin-left to 0px did the trick for me (assuming that what you're trying to do here is to get the form to align to the left side of the page).
http://jsfiddle.net/k88bqjnj/7/
I'm trying to make a popup window.
Css:
.c1{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 1003;
text-align: center;
padding-top: 49px;
}
.c2{
display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 80%;
max-width: 90%;
}
.c3{
overflow: auto;
}
Html:
<div class="c1">
<div class="c2">
<div>header</div>
<div class="c3">
*long text*
</div>
</div>
</div>
The thing is c3 block goes out of c2 when I want it reach the bottom border of c2 and become scrollable.
I need c2 block size to depend on a browser window size and to keep header on top. The best solution yet is setting max-height to c3 block.
Add height in [.c3][1]
Update Link
.c3{
overflow: auto;
height:180px;
}
you need to add
overflow: scroll;
to c2's CSS
fiddle
You need to add your overflow: auto property to your .c2 intead adding it to your siblings .c3 DEMO
.c2{
display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 200px;
max-width: 90%;
overflow:auto; -->> ADDED
}
"overflow: auto" works if there is constraint (width or height).
In you case, you have applied a overflow on the content (.c3) and not the container (.c2).
Just by moving "overflow: auto" rules to the container (.c2) should make what you expect.
.c2{
display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 80%;
max-width: 90%;
overflow: auto; /* add me */
}
.c3{
/* overflow: auto; delete me*/
}
Here is the result http://jsfiddle.net/vLrjqzcq/
The following vertically centers the inner div
HTML
<button class="outer">
<div class="inner">
Hello<br>World
</div>
</button>
CSS
.outer {
position: absolute;
top: 25%;
left: 25%;
bottom: 25%;
right: 25%;
padding: 0;
background: none;
border: none;
outline: dashed 1px black;
font-family: sans-serif;
font-size: 16px;
text-align: center;
}
.inner {
background: #ccc;
}
JSFiddle
But if I use a div instead of a button for the outer element,
For semantic reasons, I want a div not a button.
What CSS styles do I need to add to the .outer class to produce the same vertical-alignment styling that the button had?
I need this to work in Chrome and FF.
This is What you need: Link: http://jsfiddle.net/WP8um/2/
OR If you don't want margin on outer div you can use top,left,bottom,right properties. http://jsfiddle.net/WP8um/3/
CSS
.outer {
display: inline;
margin:25%;
background: none;
outline: dashed 1px black;
border: none;
padding: 0;
width: 200px;
height:200px;
}
.inner {
background: #ccc;
text-align:center;
margin: 50% 0;
}
I'm trying to make liquid HTML layout with header (taking all available width and 130px height), 2 columns (1: 300px width all possible height, 2: all available width after column 2 took its 300px and 15-20px margin between them).
Atm I've got this:
HTML:
<div class="wrapper">
<div class="header">
<!-- .... -->
</div>
<div class="content">
<div class="left-column">
<!-- ... -->
</div>
<div class="right-column">
<!-- ... -->
</div>
</div>
</div>
CSS:
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
min-width: 1000px;
min-height: 500px;
}
body {
font: 12px sans-serif;
background-color: #fff;
color: #000;
}
.wrapper {
height: 100%;
width: 100%;
position: relative;
}
.header {
padding: 0 30px;
height: 100px;
left: 0px;
right: 0px;
position: absolute;
border: 1px solid black;
border-top: none;
}
.content {
position: absolute;
top: 120px;
left: 0;
right: 0;
bottom: 0px;
margin: 10px 20px;
border: 1px solid black;
}
.left-column {
float: left;
width: 300px;
border: 1px solid black;
}
.right-column {
margin-left: 315px;
border: 1px solid black;
}
The question is: are there any better solutions?
Thanks.
I took your HTML and created this fiddle for you: http://jsfiddle.net/RdQJY/1/. I didn't use any of your CSS though - I just don't like positioning used in the way you are using it, so decided to write it from scratch (sorry about that). The lorem ipsum text is just there as a placeholder - if you remove it, you'll see that the divs will occupy the whole window. Hope this helps!
P.S.: the only drawback to my method of having equal-height columns is that there is no easy way to apply a bottom border to them.