I'm New to CSS.
Is there a way to move text within the following span like a non-repeated background-image?
for example: 50px from left, 40 px from left? without causing extra height and width!
div{
width: 300px;
height: 300px;
border: 1px solid black;
}
<body>
<div>
<span>Hello World</span>
</div>
</body>
Can I ask more question? how many space does a 16px character occupies? I mean what does 16px mean? 16pixel wide? 16 pixel height? when we select a character with mouse, there is a blue box around the selected character, which is bigger than that character. is this relevant to this question?
Firstly I think font-size always relates to the height of the letters and the reason the "blue box" is slightly larger is because it is highlighting the line specified by line-height.
To position the text inside your box you have a couple of options:
1) You can absolutely position the span inside the div like so:
div {
width: 300px;
height: 300px;
border: 1px solid black;
position: relative;
}
span {
position: absolute;
top: 50px;
left: 50px;
}
http://jsfiddle.net/5xukp/
2) You can set the span's display to block or inline-block and then apply margin or padding to position the span like so:
span {
display: inline-block;
margin-top: 50px;
margin-left: 50px;
}
http://jsfiddle.net/m79as/
EDIT - In response to your comment, there is no property like background-position where you can set it to be center center or center left however you can use vertical-align and text-align to position the text. In order to vertically align the span correctly you will need to set the display to table-cell
div {
width: 300px;
height: 300px;
border: 1px solid black;
display: table-cell;
text-align: center; /* left|right|center|justify */
vertical-align: middle; /* top|text-top|middle|bottom|text-bottom */
}
http://jsfiddle.net/6ExB2/
Related
Perhaps it will be easiest to show what I'd like to achieve on an example:
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: lightgray;
border-bottom: 5px solid gray;
}
header > div {
display: inline-block;
height: 100%;
vertical-align: middle;
padding: 10px;
}
<header>
<div><h1>Title</h1></div>
<div>Blah1</div>
<div>Blah2</div>
<div style="float: right;">Blah4</div>
<div style="float: right;">Blah3</div>
</header>
I hope the problem is clear... I want my divs to line up horizontally in the header. To achieve this, I reason, I should make these divs inline-block. And this works.
Except one thing... I want some of these divs to float to the right of the page, rather than to the left. But then, no matter what I do, these divs refuse to vertically align themsleves to the middle of the enclosing container. As you can see, Blah3 and Blah4 are far too much to the top, which looks ugly.
I was reasoning that if I use height: 100% I'll force the rightmost divs to be as tall as the encloding header, and then, if I use vertical-align: middle I'll vertically position the text in the, well, middle; but as you can see this is not the case.
How to fix this?
I'd rather suggest you the Flexbox solution:
header {
display: flex; /* displays flex-items (children) inline */
align-items: center; /* centers them vertically */
position: absolute;
top: 0;
left: 0;
width: 100%;
background: lightgray;
border-bottom: 5px solid gray;
}
header > div {padding: 10px}
header > div:nth-child(3) {margin-right: auto} /* pushes the other two siblings far right to the end of the row */
<header>
<div><h1>Title</h1></div>
<div>Blah1</div>
<div>Blah2</div>
<div>Blah4</div>
<div>Blah3</div>
</header>
I have a main wrapper div with 2 content divs inside. The position attribute of both content divs is set to relative, but for some reason they're overlapping as shown here:
I want the div outlined in red to be underneath the blue one and am having trouble figuring out how to do so.
#wrap {
height: 500px;
width: 350px;
border: 3px solid black;
}
#upper {
position: relative;
width: 40%;
height: 70%;
top: 5%;
left: 2%;
border: 1px solid blue;
text-align: center;
}
#lower {
position: relative;
width: 40%;
height: 20%;
left: 2%;
border: 1px solid red;
}
<div id="wrap">
<div id="upper"></div>
<div id="lower"></div>
</div>
Can someone please help me figure out how to align them correctly?
The styling of the div#upperDiv has top:5% which causing this to happen. Although relative but div#upperDiv is taking the 5% top to overlap on div#lowerDiv.
Solution: EITHER take that top:5% styling off from upperDiv OR add the same top style to lowerDiv.
For lower div can you try adding clear:both;
#lowerDiv {
position: relative;
clear:both;
width: 40%;
left: 2%;
border: 1px solid red;
text-align: center;
}
It is happening because u r using height in percentage. As you've taken Height of upperDiv is 70%. it is taking 70% of ur main div. and ur lower div is having more data than it can adjust in the same outer div. so ur main div should big enough so that ur lowerDiv can adjust in remaining 30% of space u r providing to it. or u can adjust ur upperDiv's percentage value of height so that both can adjust in that space.
I'm trying to align vertically a div inside a container with a height defined. I'm following the guide of http://www.vertical-align.com/, but I'm facing some issues.
According to the website, if I use this css with for this code:
#containingBlock {
height: 200px;
position: relative;
overflow: hidden;
border: 1px solid red;
}
#containingBlock > div {
position: absolute;
top: 50%;
border: 1px solid green;
}
#containingBlock > div > div {
position: relative;
top: -50%;
border: 1px solid orange;
}
<div id="containingBlock">
<div>
<div>
This should be placed in the middle
</div>
</div>
</div>
Fiddle available here
I should obtain a text perfectly in the middle. But this doesn't happen because the top: -50% doesn't work. According to Mozilla dev the top property + % value should be based on the parent's height, which has the same height of its child automatically in this case. But the "automatic wrap height" does not seem to be take into consideration. If I specify a explicit height for the parent div (I mean, the first one nested), everything seems to be ok, but I would like it to take the height of its child automatically! What's wrong with this?
If the height of the block to be positioned is known you can affect the correct positioning with negative margin (i.e 50% of the known height).
If it is not known you can affect it with a CSS transform as follows
-webkit-transform:translate(0%, -50%);
This moves the object vertically half it's own height...and so on
HTML
<div class="containingBlock one">
<div>
This should be placed in the middle
</div>
</div>
CSS
.containingBlock {
height: 200px;
position: relative;
border: 1px solid red;
}
.containingBlock > div {
position: absolute;
top: 50%;
border: 1px solid green;
-webkit-transform:translate(0%, -50%);
}
JSfiddle
here's a fiddle: http://jsfiddle.net/dC22r/4/
you have to set an height to the div that has to be centered then give it top:50% and subtract half his height with a negative margin.
I'm trying to get a gap created within a div's border to fit an image, similar to this:
Is there a way to do this in pure CSS? All I can see is:
.box {
background: url(img.png) bottom left;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
}
But my problem is border-right: 1px solid #eee; creates a line on top of my image, which is of course not desired.
It needs to be responsive. This image is an example, but you get the general idea.
Something like this?
http://jsfiddle.net/6Ufb5/
div {
border: 1px solid #ccc;
position: relative;
}
img {
position: absolute;
top: 10px;
left: 10px;
}
Give the container position relative and the img absolute, shift it to left 10px and shift it down 10px from the top and you have what you desire.
For the responsive part, that's just giving the container and/or img a % width.
Like so:
http://jsfiddle.net/6Ufb5/2/
You can achieve this by using absolute positioning of the image element - and it has to be in a <img> element, not as the background image because it will never overlap the parent border (or even if it does by adjusting the background-position property, the border will lie on top of the background image... a behavior that is expected, by the way.
<div class="box">
Content goes here
<img src="http://placehold.it/300x200" />
</div>
And the CSS:
.box {
position: relative;
border: 1px solid #333;
}
.box img {
position: absolute;
bottom: -1px;
right: -1px;
}
If you want a dynamic and/or responsive solution, you might have to resort to JS to doing so - such as resizing the image depending on the box dimensions, and assigning a height to the box to take into account of the image height (since image is absolutely positioned, it is taken out of the document flow).
See fiddle here: http://jsfiddle.net/teddyrised/xH6UV/
This might work if you can alter your markup. For accessibility I think the image should be an image and not a background, and this method is responsive (though you may want to alter margins at small sizes with media queries).
http://jsfiddle.net/isherwood/79Js5
.box {
border: 1px solid #ccc;
display: inline-block;
padding: 10px 0 10px 10px;
width: 40%;
}
.box img {
margin-right: -10%;
margin-bottom: -10%;
width: 105%;
}
<div class="box">
<img src="http://placehold.it/200x100/f3f3f3" />
</div>
I have a need for my links and buttons to look the same, but I've been unable to vertically align the text within an "a" tag in the same manner as the "button" tag. It is important to note that the tags need to be able to handle multiple lines of text (so line-height will not work).
a,button {
display: inline-block;
-moz-box-sizing: border-box;
width: 150px;
height: 150px;
vertical-align: middle;
border: 1px solid #000;
text-align: center;
}
See the jsfiddle below:
http://jsfiddle.net/bZsaw/3/
As you can see, I can get it to work with a combination of a span tag inside and setting "display:table" to the "a" and setting "display:table-cell" and "vertical-align:middle" to the span, but that doesn't work in IE7.
a,button {
width: 150px;
height: 150px;
border: 1px solid #000;
text-align: center;
}
a {
display: table;
-moz-box-sizing: border-box;
}
a span, button span {
vertical-align: middle;
text-align: center;
}
a span {
display: table-cell;
}
Looking for a simple CSS only solution.
The only reliable way to I've found align text vertically and allow wrapping of the text if it gets too long is with a 2 container approach.
The outer container should have a line height of at least double that specified for the inner container. In your case, that means the following:
a {
width: 150px;
height: 150px;
border: 1px solid #000;
text-align: center;
line-height: 150px;
display: block;
}
a span {
display:inline;
display:inline-table;
display:inline-block;
vertical-align:middle;
line-height: 20px;
*margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}
Add float left on the a tag if you want everything inline. Here's the updated example with long text in the A tag too..
http://jsfiddle.net/bZsaw/13/
You can set the line height on the span to whatever you like and if it is less than half of the line height of the parent, it will center AND allow text wrapping if your text exceeds the parent container width. This works on all modern browsers as far as I know.
All answers are not updated,and all of them are basically hacks, you should use new CSS3 features, in this case flexbox
a,button {
-moz-box-sizing: border-box;
width: 150px;
height: 150px;
display:flex;/*CSS3*/
align-items:center;/*Vertical align*/
justify-content:center;/*horizontal align*/
border: 1px solid #000;
}
<span>Testing 1,2,3</span>
<button><span>Testing 1,2,3</span></button>
That should work for your problem, note that align-items and justify-content will behave the opposite if set flex-direction:vertical, default is flex-direction:row.
Feel free to use, all browsers support it caniuse.com/#search=flex
Also check out the free and excellent course flexbox.io/ he is the best teacher at this
Also check out css-grid, also new in CSS3
If your text won't be larger than the width of the box you could set the line-height equal to the height of the box.
line-height:150px;
The cleanest and most consistent way I found is this
display: grid;
place-items: center;
https://jsfiddle.net/j8bktum9/
Use line-height:150px; and display-inline:block;