This is my code:
div {
font-size: 130px;
display: inline-block;
}
div span {
display: inline-block;
font-size: 30px;
transform: translateY(-70px);
}
<div>My Text<span> 2021</span></div>
If the window size gets smaller, then it can happen that 2021 stands alone in one line. But the line should never break like that, only after My. So it should work like that: My<possible break>Text<never a break> 2021.
How is it possible to code that? Is there an easier way than using a white-space container around?
If I use inline instead of inline-block, it generally works, but then this translateY is not possible, unfortunately.
Make the width of span equal to 0 and add some padding to the container
div {
font-size: 130px;
display: inline-block;
padding-right: 65px; /* here */
}
div span {
display: inline-block;
width: 0; /* here */
font-size: 30px;
transform: translateY(-70px);
}
<div>My Text<span> 2021</span></div>
You can use combo of position:relative and position:absolute and have more granular control over the position of span using top,left,right,bottom or transform:translate variants, whatever works for you.
I have used translateY to get the desired result :-
div {
display:inline-block;
font-size: 130px;
position:relative;
}
div span {
position:absolute;
font-size: 30px;
transform:translateY(50%);
}
<div>My Text<span> 2021</span></div>
Related
I have two inline-block elements (first image). The first one has fixed width. The second one doesn't have fixed width because the container may grow horizontally so it should fill it.
When second element text is large (second image) then it wraps down.
But what I want is the element to grow vertically (third image).
I need also text to preserve line breaks.
You can apply max-width: calc( 100% - LABEL_WIDTH ) to your .element class. Replace LABEL_WIDTH with the width of the label. This way you can define a width in em for the label instead of using two percentual values.
See this JSFiddle for a working example: http://jsfiddle.net/QL78X/2/
See this link for a table of browsers supporting calc(): http://caniuse.com/calc
li {
display: inline-block;
vertical-align: top;
list-style-type: none;
}
.label {
width: 7em;
}
.element {
width: calc( 100% - 7em );
white-space: pre-line;
}
Here's a fiddle: http://jsfiddle.net/Pv8yH/1/
Basically, I've set a width on the label, then set a max-width on the element. I've set the white-space to 'nowrap' so that the second LI doesn't wrap down. Then I have to make sure that white-space is reset back to 'normal' within the LI itself. The max-width is just for show, really, the magic is the white-space property (at least in terms of your question).
ul { white-space: nowrap; }
ul li {
display: inline-block;
white-space: normal;
}
li.label { width: 30%; vertical-align: top; background: red; }
li.element { max-width: 70%; background: green; }
NB. If you are setting a width in ems for the first element, it may be tricky to get it to all fit. It will flow like you want, but you will definitely have to tweak it to make it look nice.
You can use
float:left;
Check this example here:
http://jsfiddle.net/3M5MF/
I suggest you use max-width on the right element. I did an example here: http://codepen.io/mattdrose/pen/qCLzG?editors=110
.field__item {
display: inline-block;
vertical-align: text-top;
}
.field__item--1 {
width: 30%;
}
.field__item--2 {
max-width: 70%;
}
I use percentages, but you can replace these with your preferred method.
However, I think you should use floats so you don't have to deal with the html white space when calculating your widths.
I used relative position of container with fixed height http://jsfiddle.net/6qMvy/
.container{
width: 400px;
height: 600px;
position: relative;
}
.left{
width: 100px;
position: absolute;
}
.right{
position: absolute;
left: 120px;
}
I have 4 Images, and for some reasons my brain stopped working and i cant figure out why i cant center those.
That's the Fiddle -> http://jsfiddle.net/theminijohn/bcMX5/
If i try to just <center> them i'm getting a Deprecated Html Tag Error in my Editor.
I tried a lot of things, till rewriting the Css and Html Code, but i'm brain stuck here.
Could some Gentleman help brake my blockade ? :)
Here is one way of doing it.
Add a wrapper block element around your div's and then apply the following CSS:
.wrap {
border: 1px solid blue;
overflow: auto;
text-align: center;
}
/* Center 4 Blocks */
.hd_b {
font-size: 13px;
font-weight: normal;
margin-top: 10px;
display: block;
text-decoration: none;
}
._hd {
margin-right: 20px;
display: inline-block;
text-align: center;
}
._hd:last-child {
margin-right: 0;
}
._hd img {
opacity: .85;
}
._hd a:hover img {
opacity: 1;
}
See demo at http://jsfiddle.net/audetwebdesign/QTxy9/
The parent .wrap block has text-align: center, and this will center the child ._hd div's that have display: inline-block.
You need to reset the right margin on the last child div using ._hd:last-child.
This works pretty well if you are willing to use the inline-block display type.
Note that any white space between inline-block elements translate into a 1ex wide space, which may not be obvious when you set the margin between blocks.
All of those divs need to be in one container div that has a fixed width. Then you can apply margin: 0 auto to the container.
http://jsfiddle.net/bcMX5/9/
Try doing this:-
Give a "main" DIV outside all img DIV "<div id="main">"
and give "margin: 0 auto;" along with some width to it.
Please refer the Fiddle: http://jsfiddle.net/aasthatuteja/6U2YJ/
Hope this should solve your issue!
would this be, want you want?
._hd {
margin-right: 20px;
display: block;
width:100%;
text-align: center;
}
Forget about margin and float ;) http://jsfiddle.net/bcMX5/8/
._hd {
//margin-right: 20px;
display: block;
//float: left;
text-align: center;
}
Depends on how you want to center the elements? If it's in a column the above answer would work. Its in a grid then wrap them in a fixed width container.
._hd_container{
width:440px;
margin:0 auto;
}
http://jsfiddle.net/RzfMP/
I have a list. Each item in the list contains an icon span and text span like so:
<ul id="features">
<li>
<span class="icon"></span>
<span class="text">blah blah blahlrceoahuoa steohuasnoet huntaoheu saoetnhu saoetuhsaoe tuhsaoetnhu saoehtuasoetnhu saou</span>
</li>
</ul>
Using the following CSS
#features { list-style-type: none; }
#features li { overflow: auto;}
#features li span { float: left; }
#features .icon { background: #000; height: 55px; width: 55px; display: inline-block;}
#features .text { margin-left: 24px; display: inline-block; }
I believe this code should produce text which floats next to the icon, and automatically adjusts its width accordingly. However this isn't the case see jsfiddle.
Why isn't the text floating next to the icon?
width: auto will instruct the text span to assume as much width as it requires, based on its content. This is what causes the entire span to wrap when that space is not available.
Ah, trying to make fixed and fluid width live together in harmony... an old problem.
Here's an updated fiddle with the solution: http://jsfiddle.net/dwZaN/11/
#features { list-style-type: none; margin-top: 24px; margin-right: 24px; }
#features li { margin-bottom: 24px; overflow: auto; width: 100%; }
#features li span { }
#features .icon { background: #000; height: 55px; width: 55px; float: left; }
#features .text { padding-left: 75px; display: block; }
Basically...
Float your fixed-width icon
Don't float your fluid-width element, but give it padding-left with enough room to account for your icon and some buffer room (this automatically gives it 100% and subtracts whatever padding-left you specify)
Both elements should be block-level. You don't actually need to specify anything for the icon, but your text span needs to be display: block (or you can just switch to DIV's which are already block-level)
Also, since you specify a right margin in your parent UL, adding width: 100% makes it expand beyond the browser window and creates a horizontal scrollbar. Simply remove it.
You should be using a CSS background in the inner element and floating the LI. You do not need a separate element for the icon.
#features li { float left }
#features li span {
display:block;
background-image: url(...);
background-repeat:no-repeat;
height:25px;
padding-left:30px;
}
See my tutorial: I love lists.
If you want to use a font instead of an image, you can use position:relative, on your LI and add:
li:before {
content: "\25A0"; <--- this is a UTF-8 square
left: -1em;
position: absolute;
top: 0.1em;
}
(adjust your spacing values accordingly)
I don't use CSS that often so every time I use it I have to experiment again and figure things by trial and error.
What I'm trying to do is place icon_32 in the same line as: "I made this." The image is 32px high so I wanted to move it down a bit to center it with the line.
After experimenting a bit I found a solution that works on Safari and Chrome but doesn't work in Firefox.
Here's what I'm doing:
CSS
ul, li {
/* spacing */
margin: 0;
padding: 0;
border: 0;
outline: 0;
/* list */
list-style: none;
}
#work_list li {
display: block;
/* spacing */
margin-bottom: 10px;
}
#work_list .icon_32 {
display: inline-block;
position: absolute; /* This doesn't work in Firefox. */
cursor: pointer;
/* spacing */
margin-top: -8px;
margin-left: 8px;
}
HTML
<ul id="work_list">
<li> I made this. <div class="icon_32"></div></li>
<li>I write, sometimes.</li>
</ul>
Because one can't add a padding-top to inline elements, I made the icon's position absolute. The problem with just having it absolute is that I have to manually set the margin-left because the icon doesn't move to the left automatically with the text. By setting display to block on the <li> and display to inline-block on the icon, what I was trying to achieve worked (although I don't fully understand why). This however, doesn't work in Firefox (and I haven't even tested in IE yet).
Is there a proper way to achieve what I'm truing to do that works correctly on all browsers?
Update: How I ended up solving this by using the suggestions from the answers. Thanks a lot for the help!
I didn't want to use line-height because I wanted to preserve the original height of the li. I just got rid of the unnecessary position: absolute and added vertical-align: middle. After doing so, the image was still affecting the height of the li, so I just added an id to the affected li and overwrote the margin-bottom so the sum of its height + bottom margin would equal the sum from the li without the 32px image.
This is how it ended up being:
CSS
ul, li {
/* spacing */
margin: 0;
padding: 0;
border: 0;
outline: 0;
/* list */
list-style: none;
}
#work_list li {
display: block;
/* spacing */
margin-bottom: 10px;
}
#work_list #work_item_icon {
margin-bottom: 3px;
}
#work_list span.icon_32 {
display: inline-block;
cursor: pointer;
/* spacing */
vertical-align: middle;
margin-top: -8px;
margin-left: 8px;
}
HTML
<ul id="work_list">
<li id="work_item_icon">I made this. <span class="icon_32"></span></li>
<li id="work_item_writing">I write, sometimes.</li>
</ul>
There are many ways to do this:
You can use negative margins to even out the difference between the line height and image height. The height of one line of text appears to be 20px; so a margin-top: -6px and margin-bottom: -6px will make the 32px tall image act as if it were 20px:
#work_list img.icon_32
{
vertical-align: middle;
margin-top: -6px;
margin-bottom: -6px;
}
#work_list span.icon_32
{
/* //// SPAN AS IMAGE \\\\ */
display: inline-block;
width: 32px;
height: 32px;
background-image: url(http://dummyimage.com/32x32/cf0/000&text=32x);
/* \\\\ SPAN AS IMAGE //// */
vertical-align: middle;
margin-top: -6px;
margin-bottom: -6px;
}
demo
Alternately, you can set a line height equal to the height of the image and set vertical-align: middle for the image. You can adjust a few pixels using a negative margin-top:
ul, li
{
line-height: 32px;
}
#work_list img.icon_32
{
vertical-align: middle;
margin-top: -4px;
}
#work_list span.icon_32
{
/* //// SPAN AS IMAGE \\\\ */
display: inline-block;
width: 32px;
height: 32px;
background-image: url(http://dummyimage.com/32x32/cf0/000&text=32x);
/* \\\\ SPAN AS IMAGE //// */
vertical-align: middle;
margin-top: -4px;
}
demo
This also work in firefox also please give position:relative to your LI
or it's better to edit your HTML like this:
<ul id="work_list">
<li><span>I made this.<span> <div class="icon_32"></div></li>
<li>I write, sometimes.</li>
</ul>
CSS:
li span, icon_32{
display:inline-block;
}
Try adding this css rule to your li,
li {line-height: #px;}
play around with the line height to get what you want. Also if using line height affects the image add float: left; to it, or take it out of normal flow.
I think your solution will be line-height. You can set this on the li, and it will center the text vertically.
#work_list li {
line-height: 32px;
}
#work_list .icon_32 {
height: 32px;
width: 32px;
}
Give the element containing the icon div relative position and it will make the positioning of the icon relative to that container.
http://jsfiddle.net/9HeNy/
Make the icon_32 element position : relative and it's parent li element line-height : 32px. A demo is above.
Docs for line-height: https://developer.mozilla.org/en/CSS/line-height
I have the following HTML:
<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>
with this CSS:
.title
{
display: block;
border-top: 4px solid #a7a59b;
background-color: #f6e9d9;
height: 22px;
line-height: 22px;
padding: 4px 6px;
font-size: 14px;
color: #000;
margin-bottom: 13px;
clear:both;
}
If you check this jsFiddle:
http://jsfiddle.net/8JwhZ/
you can see that the Name & Date are stuck together. Is there a way that I can get the date to align to the right? I've tried float: right; on the second <span> but it screws up the style, and pushes the date outside of the enclosing div
If you can modify the HTML: http://jsfiddle.net/8JwhZ/3/
<div class="title">
<span class="name">Cumulative performance</span>
<span class="date">20/02/2011</span>
</div>
.title .date { float:right }
.title .name { float:left }
Working with floats is bit messy:
This as many other 'trivial' layout tricks can be done with flexbox.
div.container {
display: flex;
justify-content: space-between;
}
In 2017 I think this is preferred solution (over float) if you don't have to support legacy browsers: https://caniuse.com/#feat=flexbox
Check fiddle how different float usages compares to flexbox ("may include some competing answers"): https://jsfiddle.net/b244s19k/25/. If you still need to stick with float I recommended third version of course.
An alternative solution to floats is to use absolute positioning:
.title {
position: relative;
}
.title span:last-child {
position: absolute;
right: 6px; /* must be equal to parent's right padding */
}
See also the fiddle.
The solution using flexbox without justify-content: space-between.
<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>
.title {
display: flex;
}
span:first-of-type {
flex: 1;
}
When we use flex:1 on the first <span>, it takes up the entire remaining space and moves the second <span> to the right. The Fiddle with this solution: https://jsfiddle.net/2k1vryn7/
Here https://jsfiddle.net/7wvx2uLp/3/ you can see the difference between two flexbox approaches: flexbox with justify-content: space-between and flexbox with flex:1 on the first <span>.
You can do this without modifying the html.
http://jsfiddle.net/8JwhZ/1085/
<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>
.title span:nth-of-type(1) { float:right }
.title span:nth-of-type(2) { float:left }
ul { /** works with ol too **/
list-style: none; /** removes bullet points/numbering **/
padding-left: 0px; /** removes actual indentation **/
}