I'm trying to create a square box that should be clickable and lead the user to another page. For this, and to add some hover effects later, I am using the < a > element.
Here is the html-markup:
<a id="about" href="">
<p>About Me</p>
</a>
Here is the CSS markup for the element:
a#about {
display: block;
width: 300px;
height: 300px;
border: 1px solid black;
}
Now, I can center the text horizontally by using the text-align property without problems. However, I have yet to find a way on how to center the text vertically.
I tired using margins and paddings, but they will just change the width of the containing box.
Do you guys have any suggestions?
Thanks!
If the text will only ever be one line high, set line-height:300px to match the height of the element.
like this
DEMO
CSS
a#about {
display: table-cell;
width: 300px;
height: 300px;
border: 1px solid black;
vertical-align:middle;
}
p{
text-align:center;
}
Try this:
a#about {
display: table-cell;
vertical-align: middle;
}
p {
text-align: center;
}
demo
here you go
http://jsfiddle.net/tMfA7/
a#about {
display: block;
width: 300px;
height: 300px;
line-height:300px;
border: 1px solid black;
text-align:center;
margin:0;
}
Css:
a#about {
display: block;
width: 300px;
height: 300px;
line-height:300px;
border: 1px solid black;
}
Note: if you had text two lines of text then the second line will be 300px below the first
For this you can try this Css code in your style sheet.
vertical-align:central;
Related
My second inner div position is weirdly adjusted when my first inner div have a long link text. How to fix it?
My html code:
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
My css code:
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
link to the picture of the div:
https://www.dropbox.com/s/9zs4mgj7izuqsp1/question.png?dl=0
The problem is with your CSS. Particularly the .div-wrapper div
You need to change the display setting from inline-block to inline-table to get it inside the cell. You mentioned that you wanted the box inside the larger box, but you need to clarify how exactly you want the inner boxes to be placed inside the larger box (ex: small gap between the boxes, both perfectly fit inside the large box with equal sizes)
Just changed inline-block to inline-flex for your inner div and looks fine.
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-flex;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
Just have to fix this, I don't think any solution here explains why the problem exists. Just to add up, the problem with this is because vertical-align is set to baseline by default.
What you have to do is set the vertical-align to top
Insert it in your CSS:
.div-wrapper div {
vertical-align: top;
}
Link to solution: https://jsfiddle.net/Lnvgkfz3/
Small changes in CSS
.div-wrapper {
border: 1px solid black;
width: auto;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 190px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
I'm trying to insert a text with the upper side of a box using CSS, but I can't come up with anything to make it happen. this is my code so far:
.boxed{
border: 1px solid grey;
width: 300px;
height: 180px;
}
and this is what I want to do:
how do i insert a text in the upper border of a box?
*im already done with this thanks guys. but my problem now is putting pagination on tabs. can u help me? the rest of the code is in here:
http://jsfiddle.net/3y539gvq/
Set your box to relative positioning and position the label using absolute positioning. Also, I'd recommend setting the background of your container, and inheriting the background in the label CSS to keep the two consistent.
.boxed {
position: relative;
background: white;
border: 1px solid grey;
width: 300px;
height: 180px;
}
.label {
background: inherit;
padding: 0 5px;
position: absolute;
left: 5px;
top: -10px;
}
<div class="boxed">
<span class="label">General Information</span>
</div>
DEMO: http://jsfiddle.net/b7a29fsd/1/
You can use:
.boxed {
... your existing styles ...
position:relative;
}
.boxed:after {
position:absolute;
top:-5px;
left:15px;
padding:3px;
content: "your label text";
background-color: (something to cover up the border underneath)
}
You can put a text within the div you have like so:
<div>
<p> Some text </p>
</div>
CSS:
.boxed{
border: 1px solid grey;
width: 300px;
height: 180px;
position:absolute;
}
.boxed p{
position:relative;
top:-28px;
left:5px;
z-index:1;
background-color:white;
width:80px;
}
}
Example here.
I was asked to code an unusual shape background on some centered text.
The text should be centered and have it's background extend to the right edge of the content-box.
How can I do this with CSS?
http://jsfiddle.net/7U688/
The text centering is cake.
The tricky bit is extending the background off into one direction.
This is one way of accomplishing this:
#outer{
border:2px solid black;
background-color:red;
overflow:hidden;
}
#inner{
margin:40px;
text-align:center;
}
p{
display:inline-block;
color:white;
background-color:black; // or an image
margin:0 -999em 0 5px;
padding: 5px 999em 5px 5px;
line-height:1;
}
In this case - I use a huge padding and an equally huge negative margin to keep an element in flow, but visually extend outside of its borders. A benefit of this technique is that it allows the dev to keep an element in normal static or relative position.
Finally, use overflow:hidden in a parent element to prevent unwanted bleed.
Using :after, you may do something like THIS.
This allows the text to be centered normally without using margin and padding hacks.
p {
display: table;
background: black;
margin: auto;
color: white;
position: relative;
font-size: 1em;
}
p:after {
content: '';
background: black;
width: 150px;
line-height: 1em;
height: 100%;
display: inline-block;
position: absolute;
}
Is this what you want? Fiddle
Html:
<div class="wrapper">
<span class="text">You text</span>
</div>
Css:
.wrapper {
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.text {
background: yellow;
}
FIDDLE
.a,.c
{
width: 100px;
height: 300px;
background-color: red;
display:inline-block;
}
.b
{
background-color: gray;
display:inline-block;
border: 1px solid;
}
.main
{
width:100%;
display:inline-block;
height: 300px;
}
Why does the div b is at the bottom. Please set height at the fiddle and check. It ll grow down. Does anybody know the reason?
inline-block default value for vertical-align in CSS is baseline. You need to set the vertical-align property to fix that.
.b
{
background-color: gray;
display:inline-block;
border: 1px solid #ccc;
vertical-align:top;
}
DEMO
Add vertical-align: top; rule to class b or all the classes that have the rule display: inline-block. display: inline-block is by default bottom aligned.
you can use table-cell instead of inline-block;
.a,.c
{
width: 100px;
height: 300px;
background-color: red;
display:table-cell;
}
.b
{
background-color: gray;
display:table-cell;
position: relative;
border: 1px solid;
vertical-align:middle;
}
.main
{
width:100%;
display:table;
height: 300px;
}
Jsfiddle
inline-block behave as the block level when your browser will be re-sized larger or if your contents exceeds than its width while display: table-cell; won't. You'll also find the gap between block when you apply display: inline-block;
more can be read on this question.
question
There are rules in display: in-line block that mess it up in your case. Just change them to float: left as in this jsfiddle
.a,.c
{
width: 100px;
height: 300px;
background-color: red;
float: left;
}
.b
{
background-color: gray;
float: left;
border: 1px solid;
}
.main
{
width:100%;
float: left;
height: 300px;
}
You don't have any contents on first and last divs.
Because all the divs are displayed inline-block the default position will go to baseline. Try adding some contents to the .a and .c divs, you will see different behaviors.
When you are all setup with the contents you need to adjust the vertical-align to have your desired look.
I have this JSFiddle. Can someone explain, why is the anchor position misaligned relative to its siblings? I know I can correct it with position relative and negaitve top offset, but I don't understand, why it is like this in the first place.
HTML:
<div class="container">
<div class="left"></div>
Some link
<div class="right"></div>
</div>
CSS:
.container {
height: 25px;
white-space: nowrap;
}
.container .left {
border: 1px solid black;
display: inline-block;
margin: 0;
height: 25px;
width: 80px;
padding: 0;
}
.container .right {
border: 1px solid black;
display: inline-block;
margin: 0;
height: 25px;
width: 80px;
padding: 0;
}
.container a {
display: inline-block;
border: 1px solid black;
height: 25px;
width: 300px;
margin: 0;
}
The reason of this behaviour is due to the absence of text inside your .left and .right elements.
By default inline-block elements have vertical-align: baseline, but since you have empty elements there's no baseline, so they will be automatically aligned to the parent baseline (if you add some text inside them — even a — you would istantly solve the problem)
In order to prevent this behaviour you could also set a common vertical-align to all .container children.
You can add
vertical-align: top;
to .container a
This wil align the anchor with the divs.
You need to provide vertical-align property when you are declaring an inline-block.
Here you go.
WORKING DEMO
The CSS Change:
.container a {
display: inline-block;
border: 1px solid black;
height: 25px;
width: 300px;
margin: 0;
vertical-align:top;
}
You can use so many Option
1. Remove Display:inline-block and add float:left
Here the Demo
2. Use css vertical-align:top
Here demo