i have a div in my HTML like this:
<div id="audio"><span>فایل های صوتی</span></div>
the CSS of these 2 elements is like this:
#audio{
width: 100%;
height: 11%;
background-color: #3F1954;
}
span{
font-size: 20px;
color: white;
text-align: center;
font-family: btitr;
}
i want that the span be center (horizentaly and verticaly) in the div and when i zoom in or zoom out my page it remains center.
if i remove the span tag, with
text-align: center;
i can make it center(but only horizentaly)
what should i do to make it center verticaly?
should i remove span or it must be remain?
You can add display: table in div css and vertical-align: middle , display: table-cell in span css. Live Demo
HTML Code:
<div id="audio"><span>فایل های صوتی</span></div>
CSS Code:
#audio {
width: 100%;
height: 20px;
background-color: #3F1954;
text-align: center;
display: table;
}
span {
font-size: 20px;
color: white;
text-align: center;
font-family: btitr;
vertical-align: middle;
display: table-cell;
}
Result:
Related
I want to show a list of tags at the bottom of the screen and if they don't all fit, I want it to wrap so that it's the first line that is the shortest - not the last line.
Once the bottom line is full, I would prefer if the next item added would be what would then appear above instead of below. But if it's easier to make the first item move up that would be ok too.
This example should make it clear:
div {
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
text-align: right;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
}
<div>
<span>Apple</span>
<span>Orange</span>
<span>Banana</span>
<span>Pear</span>
<span>Apricot</span>
<span>Cranberry</span>
<span>Blackcurrant</span>
<span>Raspberry</span>
<span>Strawberry</span>
<span>Plum</span>
<span>Tomato</span>
<span>Lemon</span>
<span>Lime</span>
<span>Coconut</span>
</div>
This can be achieved by adding flexbox styles to the parent container like so:
div {
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
text-align: right;
/* flexbox styles */
display: flex;
flex-wrap: wrap-reverse;
justify-content: flex-end;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
/* margin to separate tags */
margin: 0.1em;
}
<div>
<span>Apple</span>
<span>Orange</span>
<span>Banana</span>
<span>Pear</span>
<span>Apricot</span>
<span>Cranberry</span>
<span>Blackcurrant</span>
<span>Raspberry</span>
<span>Strawberry</span>
<span>Plum</span>
<span>Tomato</span>
<span>Lemon</span>
<span>Lime</span>
<span>Coconut</span>
</div>
Try using display:flex, also use flex-wrap:wrap-reverse in order to wrap the elements the way you want.
div {
display: flex;
flex-wrap: wrap-reverse;
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
text-align: right;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
}
Using flex property to align like this,
div {
display: flex;
flex-wrap: wrap-reverse; // reverse the wrapping
flex-direction: row-reverse; // reverse the row
}
also add some margin to span
span{
margin:3px;
}
flex-wrap - The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
flex-direction: row-reverse - Work in a left-to-right language such as English. If you are working in a right-to-left language like Arabic then row would start on the right, row-reverse on the left.
Result:-
LIVE DEMO
div {
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
margin:3px;
}
<div>
<span>Apple</span>
<span>Orange</span>
<span>Banana</span>
<span>Pear</span>
<span>Apricot</span>
<span>Cranberry</span>
<span>Blackcurrant</span>
<span>Raspberry</span>
<span>Strawberry</span>
<span>Plum</span>
<span>Tomato</span>
<span>Lemon</span>
<span>Lime</span>
<span>Coconut</span>
</div>
I am dealing with text blocks (background blocks over text) and face some issues with paddings on new line. The problem occurs when the browser(e.g. mobile) cuts the text into to two lines due to lack of width. text then looks like this:
I don't really know how to set a padding css on the end of the new lines, since it could break up anywhere of the sentence. You could say put a span on it with padding, but it is not fixed where the line will break down. It depends on the width. Any recommendations?
You could apply display: inline-block but that will turn the background color into an ugly box which doesn't look as nice as having an exact width background for each line. Unfortunately CSS doesn't let us target individual lines except for the first one.
If you don't mind getting a little "creative" (or hacky) you could wrap each word in its own element in the backend or using JavaScript and apply the background color to those elements. Adjust the parent's word-spacing accordingly to eliminate gaps.
.main {
font-family: sans-serif;
font-weight: bold;
background-color: #99c;
display: flex;
height: 400px;
flex-direction: row;
align-items: center;
}
.text-container {
max-width: 500px;
display: inline-block;
word-spacing: -15px;
position: relative;
padding-left: 20px;
overflow: hidden;
}
.text-container::before {
content: '';
background-color: black;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 100%;
z-index: 1;
}
span {
font-size: 36px;
line-height: 1.5em;
color: white;
background-color: black;
padding: 0.25em 0.5em 0.25em 0;
max-width: 360px;
}
<div class="main">
<div class="text-container">
<span>A</span> <span>Movie</span> <span>in</span> <span>the</span> <span>park:</span> <span>Kung</span> <span>Fu</span> <span>Panda</span>
</div>
</div>
You can use box-shadow for this issue and display inline:
<div class="text">
<span class="text-container">A Movie in the park: Kung Fu Panda</span>
</div>
And css:
.text > span {
display: inline;
box-shadow: 25px 0 0 black, -10px 0 0 black;
background-color: black;
color: white;
}
Try to add after "Park:" and before "Kung"
padding workded!!!
change width by console browser and see result:
h1{
background-color: #ff6a6a;
padding: 33px;
display: inline-block;
word-wrap: break-word;
width:300px
}
<h1>rert ert erttttttttttttttt 00000000000000000000 dfgdfgd dfgdfgdft ertert </h1>
Use <p> tag to wrap up the text and it apparently works demo
<div class="main">
<div class="text-container">
<p id="test">A Movie in the park: Kung Fu Panda</p>
</div>
</div>
css
.main {
font-family: sans-serif;
font-weight: bold;
background-color: #99c;
display: flex;
height: 400px;
flex-direction: row;
align-items: center;
}
.text-container {
max-width: 400px;
}
p {
font-size: 36px;
line-height: 2em;
color: white;
background-color: black;
padding: 0.5em;
max-width: 360px;
}
The blocks are being laid out vertically (one on top of the other), I'm trying to use inline blocks to place 2 blocks side by side. I wanted to use inline-block instead of floats which do work. The steps div class is the container for both inline blocks. Am I missing something?
img.down_image {
display: inline-block;
vertical-align: middle;
width: 465px;
}
div.steps {
display: block;
position: absolute;
height: 500px;
top: 50%;
text-align: center;
}
ol {
display: inline-block;
vertical-align: middle;
width: 400px;
height: auto;
padding: 0 0 0 40px;
list-style: none;
overflow: hidden;
counter-reset: numList;
font: 16px sans-serif;
color: #fff;
}
the html:
<div class="steps">
<div class="down_image">
<img src="pic1.png" class="down_image" />
</div>
<ol>
<li>sdsdgsdgsdgsdgsdgsdg</li>
<li>sdgsdgsdgsdgsdg install Java.
</li>
<li>sdgsdgsdgsdgsdg</li>
</ol>
</div>
Add the following in your style
div.down_image {
display: inline-block;
}
You made the image inline, but the container div is not inline!
If you still have same issue, check the widths! Total width of 400 (ol) + 465 (img) = 865px might be more than the area you are using.
This code works fine, when widths are fixed. jsfiddle
Add white-space: nowrap; to div.steps and change html:
div.down_image {
width: 60%;
display: inline-block;
background-color: #ded;
}
div.steps {
white-space: nowrap;
width: 100%;
display: block;
position: absolute;
height: 500px;
top: 50%;
text-align: center;
}
ol {
background-color: #dde;
display: inline-block;
vertical-align: middle;
width: 30%;
height: auto;
padding: 0 0 0 5%;
list-style: none;
overflow: hidden;
counter-reset: numList;
font: 16px sans-serif;
color: #fff;
}
<div class="steps">
<div class="down_image">
</div><ol>
<li> sdsdgsdgsdgsdgsdgsdg</li>
<li> sdgsdgsdgsdgsdg install Java.</li>
<li> sdgsdgsdgsdgsdg</li>
</ol>
</div>
Notice glued </div><ol>
Note: make sure to add div.down_image { display: inline-block; }
Also, you can try to give position: absolute; to image's div and ol.
Given the following html:
<div class="body">
<div class="banner">
<div class="name">
<h2>
<a href="http://www.example.com">
<span class="bold">Test Link</span><br/>
</a>
</h2>
</div>
<div class="title">
<h3>A Connections Learning Partner Program</h3>
<p>Quality online learning for high school students in Oakland County and surrounding counties.
</p>
</div>
<div class="link">
Learn More
</div>
</div>
</div>
How can I vertically align .link a (the button) within .link without giving a height or width? Like this...
Here's my fiddle
Here is one way that you can do it. Your HTML is good, no need to change anything.
For the CSS:
.body { width: 920px; }
.banner {
background-color: #454545;
border-bottom: 3px solid #F9F9F9;
height: 100px;
margin: 0 0 5px;
padding: 0;
display: table;
}
.banner > div {
outline: 1px dotted yellow; /* optional to show cell edges... */
display: table-cell;
}
.banner .name {
width: 25%;
vertical-align: top;
padding-top: 25px; /* control top white space */
text-align: center;
}
.banner .name h2 {
color: #F9F9F9;
max-height: 55px;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.banner .title {
width: 50%;
vertical-align: top;
padding-top: 25px;
}
.banner .title h3 {
font-size: 15px;
font-weight: bold;
line-height: 15px;
margin: 0px 0 0 0;
padding: 0;
}
.banner .title p {
font-size: 12px;
max-height: 35px;
overflow: hidden;
margin: 0;
padding: 0;
}
.banner .link {
width: 25%;
vertical-align: middle;
text-align: left; /* set to left, center or right as needed */
}
.banner .link a {
margin-left: 25px; /* controls left offset */
background-color: #FA9800;
border-radius: 5px 5px 5px 5px;
cursor: pointer;
display: inline-block; /* use inline-block if you want to center element */
font-size: 12px;
font-weight: bold;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
width: 100px;
}
See the fiddle at: http://jsfiddle.net/audetwebdesign/jsG8F/
How This Works
The trick is to use display: table on your .banner container and then display: table-cell on your child div elements, and set the % widths to 25%, 50%, 25% respectively for .name, .title, .link.
You can then use vertical-align and text-align to control vertical and horizontal placement of the various text blocks.
I added comments related to using padding-top to control white space from the top of the banner.
For the .link a element, you can adjust the left margin (or right) as needed.
These CSS rules offer you a lot of fine control over the placement of the various elements within the banner.
Backwards Compatibility
The display: table-cell property is backwards compatible back to IE8.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display
If the size of the element and banner are fixed, use margin-top to offset the element.
Marc Audet was very close but I ended up going a slightly different route.
I gave .link a a fixed top margin and made margin-left: auto; and margin-right: auto; and that did the trick.
Here is the fiddle for reference.
I have this html code:
<ul id="top-bar">
<li class="top-icon-block"><img src="images/home.png"></li>
<li class="top-icon-sep-block"><img src="images/top_icon_separator.png"></li>
<li class="top-icon-block"><img src="images/home.png"></li>
</ul>
and the relevant css looks like this:
#top-bar {
width: inherit;
height: 40px;
padding: 0px;
margin: 0px;
vertical-align: middle;
display: table-row;
}
.top-icon-block {
width: 50px;
margin: 0px;
background-image: url("images/top_bar_bg.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
li.top-icon-block img {
padding-top: 8px;
vertical-align: middle;
}
.top-icon-sep-block {
width: 4px;
margin: 0px;
background-image: url("images/top_bar_bg.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
li.top-icon-sep-block img {
padding-top: 18px;
vertical-align: middle;
}
for some reason, All of the images are aligned based on the highest padding-top, whereas I really need them to be differ.
Here is a jsfiddle: http://jsfiddle.net/XWdMP/
If I understand your issue correctly, it is because the padding is different on your elements, but it is being rendered inline with the larger padding. Effectively pushing down your other two images.
Adding a overflow hidden to your li elements should resolve the problem and hide the gap being shown from the difference in padding from the images.
#top-bar li {
overflow: hidden;
}
Let me know if that resolves the issue.
http://jsfiddle.net/rakkeh/XWdMP/1/