How would you go about positioning the text in this <button> in the upper left or bottom right (or whatever)? I can't figure out what's causing it to vertically align the way it is, or how to override it.
<button>
<time>Foo</time>
<br />
<span>Bar</span>
</button>
button {
display: block;
width: 124px;
height: 200px;
padding: 0;
border: 0;
border-radius: 0;
text-align: left;
background: #EEE;
}
example jsfiddle
Wrap your inner elements in a div and set the position on the button to relative, and the position on the div to absolute like this jsFiddle example:
<button>
<div>
<time>Foo</time>
<br /> <span>Bar</span>
</div>
</button>
button {
display: block;
width: 124px;
height: 200px;
padding: 0;
border: 0;
border-radius: 0;
text-align: left;
background: #EEE;
position:relative;
}
div {
position:absolute;
bottom:0;
right:0;
}
Surround the text in a div, set a class on the div. Use custom css on that div to move it where ever you want.
<button>
<div class="move">
<time>Foo</time>
<br />
<span>Bar</span>
</div>
</button>
button {
display: block;
width: 124px;
height: 200px;
padding: 0;
border: 0;
border-radius: 0;
text-align: left;
background: #EEE;
}
.move{
padding-top:50px;
}
See here: http://jsfiddle.net/gzTax/
If you're looking for a solution that lets you change the alignment without any additional markup, you can try playing around with the padding. For example, reduce the height and increase the padding-top value.
For example: http://jsfiddle.net/hNs7q/14/
Related
I got the following question, with a pic to illustrate:
I got a container, containing an icon and text. The Icon is always on the left, there can be more icons which are all fixed on the left. Now I want the text to be in the centre of the container. If the text gets too long, it should NOT overlap the icons, but it should expand to the right instead.
If the text is too long to fit in the container next to the icon, finally I just ellipse it.
But how do I do this? Is there a css solution?
Thanks in advance!
You can have the text taking the entire width of the container parent, but having left and right padding in a way that it will have enough space for the icon.
Then you can have the icon overlaying on top of the textbox.
The text box can align text in the center and clip text if overflow.
I made a simple pen to illustrate the idea. I hope this help
Codepen example
Here's the code.
HTML
<div class="container">
<i class="fa fa-map"></i>
<div class="textbox"><span class='centerized-text'>This is a centered text and it is very long</span></div>
</div>
CSS
.container {
background-color: #FAFBFD;
width: 15rem;
height: auto;
padding: 0.5rem;
border-radius: 4px;
}
i {
color: teal;
position: absolute;
}
.textbox {
padding: 0 1.3rem;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body {
padding: 2rem;
background-color: #dedede;
}
(The style for body is just for your visual pleasure)
Here a code
#container {
display: flex;
flex-direction: row;
padding: 20px;
border: 2px solid skyblue;
}
#icon {
width: 24px;
height: 24px;
border-radius: 12px;
background-color: skyblue;
}
#text {
flex: 1;
text-align: center
}
<div id="container">
<span id="icon"></span>
<span id="text">Lorem Ipsum</span>
</div>
To have text centered in the block
#container {
position: relative;
padding: 20px;
border: 2px solid skyblue;
text-align: center;
}
#icon {
width: 24px;
height: 24px;
border-radius: 12px;
background-color: skyblue;
position: absolute;
left: 20px;
top: 0;
bottom: 0;
margin: auto;
}
<div id="container">
<span id="icon"></span>
<span id="text">Lorem Ipsum</span>
</div>
In a container use, two span tag and First span will contain your image tab and another has text in it.
You can use align-text-center to center your text.
I am having some trouble with my css, I have a content id and then inside that I have a class that is just padding. When inside the padding class, I have a textarea and a submit button. By default, the submit button is on the left:
But when I go to align the submit button to either the left or right of the content, it will go ther ebut it will also go outside of the content, like it's not part of it anymore:
These are my html and css codes
html:
<div id="content">
<div class="content-padding">
<textarea class="content-post" placeholder="Update your status..."></textarea>
<input type="submit" class="content-submit">
</div>
</div>
css:
#content {
width: 60%;
background: #dddddd;
color: #000;
margin: 0 auto;
border-radius: 4px;
margin-bottom: 10px;
height: auto;
}
.content-padding {
padding: 10px;
}
.content-post {
width: 97.5%;
height: 80px;
border: 0px;
background: #fff;
resize: none;
padding: 10px;
outline: none;
margin-bottom: 5px;
border-radius: 4px;
}
.content-submit {
background: #005ddb;
width: 70px;
height: 30px;
border: 0px;
border-radius: 4px;
color: #fff;
outline: none;
cursor: pointer;
float: right;
}
I hope someone cal help me fix this as soon as possible, thanks!
You need to trigger the layout of .content-padding or add a clearing element.
.content-padding {
padding: 10px;
overflow:hidden ; /* minds inside and outside floatting elements, fine if no size given */
}
or a generated clearing element.
.content-padding:after {
content:'';
display:block; /* or whatever else than inline */
clear:both;
}
Learn more about floatting elements : http://css-tricks.com/all-about-floats/
add overflow: auto under #content in your CSS.
Another option would be to add another div in your markup right after the submit button.
<div class="clear"></div>
In your CSS you would then add the following.
.clear{
clear: both;
}
fiddle
You can create a div with clear:both style after the button:
<div id="content">
<div class="content-padding">
<textarea class="content-post" placeholder="Update your status..."></textarea>
<input type="submit" class="content-submit">
<div style="clear:both"></div>
</div>
</div>
The float attribute makes the height of element zero, then the parent div do not recognize the height of element.
Try this:
#content:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
From http://css-tricks.com/snippets/css/clear-fix/.
The problem arises because you do not have a static height set for #content. If you set a static height for content ( padding + textArea + submitButton ) and set that as the height for #content, then it will look allow the room for everything.
#content {
width: 60%;
background: #dddddd;
color: #000;
margin: 0 auto;
border-radius: 4px;
margin-bottom: 10px;
height: 140px; //Play with this number to get it perfect.
}
The content in the p elements can be put in the div container with the following css codes.
* {
margin: 0 0 0 0;
padding: 0 0 0 0
}
div.container {
width: 400px;
height: 121px;
border: 1px solid red;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
top: 0px;
margin: auto;
}
div.box {
float: left;
}
div img {
margin: 0px;
padding: 0;
width: 121px;
height: 121px;
float: left;
}
div.description {
float: left;
border 1px solid red;
margin: 10px 50px;
}
<div class="container">
<div class="box">
<img src="images/set06.jpg" />
</div>
<div class="description">
<p>music mane: xxxxxxxx</p>
<p>author: yyyyyyyy</p>
<p>publication：20081001</p>
<p>language：english</p>
</div>
</div>
Now i replace the p elements with span elements.
* {
margin: 0 0 0 0;
padding: 0 0 0 0
}
div.container {
width: 400px;
height: 121px;
border: 1px solid red;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
top: 0px;
margin: auto;
}
div.box {
float: left;
}
div img {
margin: 0px;
padding: 0;
width: 121px;
height: 121px;
float: left;
}
div.description {
float: left;
border 1px solid red;
margin: 10px 50px;
}
<div class="container">
<div class="box">
<img src="images/set06.jpg" />
</div>
<div class="description">
<span>music mane: xxxxxxxx</span>
<span>author: yyyyyyyy</span>
<span>publication：20081001</span>
<span>language：english</span>
</div>
</div>
The displayed effect is as following.
All the contents in the span were out of the div container,not the same effect in the p elements,how to make all the contents in the span elements within the div container?
the reason your SPAN elements are being floated outside the div is because SPANs, by default, are displayed as inline elements. if you want to use the SPAN tags, rather than the P tags, and have them remain inside the DIV, simply use the following rule:
div.description span { display:block; }
This should fix the problem, though it might look a little needless to use this rule, rather than using a P tag. But, it's your website and your choice.
The reason it works in the first case and not the second is because <p> tags are display: block by default and <span> tags are display: inline by default. The block paragraph elements display one per line within their parent, and since their parent is floated, they only take up as much width as necessary.
But, with the inline span tags, they display side by side, taking up as much width as they can, causing their parent (the description div) to be wider than the space to the right of the image. So, the description div displays below the image.
To fix this, you can set display: block on the span elements. Like:
div.description span
{
display: block;
}
Here's a working demo: https://jsfiddle.net/uy8x9z4v/. However, since the <p> tags already have the block display feature you need, I would recommend using them instead of spans, unless you have a very good reason not to.
Some HTML tags have default CSS values. <span>has none, while <p> has the following:
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
So your problem is that <span> does not have display: block;
I'm trying to have 3 left aligned floats. Here's the following JFiddle that does it.
div { height: 45px; }
div.side {
background-color: skyblue;
width: 72px;
float: left;
}
div#range {
background-color: tomato;
width: 216px;
float: left;
}
span {
width:100%;
text-align: center;
display: block;
margin: 3px auto;
/* background-color: gold; */
}
<div id="start" class="side">
<button type="button">Click Me!</button>
</div>
<div id="range"></div>
<div id="end" class="side">
<button type="button">Click Me!</button>
</div>
What I'm trying to do now is center align the buttons within the div called side. I've tried using another div with it's text-align set to center, but that doesn't work.
The text-align: center applied to .side divs should do the trick, because button elements are inlines by default. Note, I changed .side's widths to make the centering effect noticeable: https://jsfiddle.net/021gu79c/1/.
CSS:
div.side {
background-color: skyblue;
width: 120px;
float: left;
text-align: center;
line-height: 45px;
}
I guess he means horizontal, based on the text-align property.
Hav you tried to add a wrapper div around the Buttons with
.btn-wrapper{
position: absolute;
left:40%;
right:40%;
Maybee that's working for you
I'm trying to line up these image links in a row but having some difficulty with it. If I add some CSS parameters like float left and float right, it ends up positioning it in weird spots on the page.
This is what I got:
.preview {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
}
.preview img {
width: 100%;
height: 100%;
padding: 0;
}
.preview > div {
background-color: rgba(0,0,0,0.75);
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transition: opacity 0.3s linear;
text-shadow: #000 1px 1px 0;
color: #ccc;
text-align: center;
}
.preview:hover > div {
display: block;
opacity: 1.0;
}
.preview > div div {
padding: 20px 40px;
}
.preview h2 {
font-size: 1.2em;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 10px;
}
.preview p {
margin-bottom: 10px;
}
<a href="http://www.page.com/album">
<div class="preview">
<img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Record-Album-02.jpg" title="Photo Albums" alt="" />
<div>
<div>
<h2>Photo Albums</h2>
</div>
</div>
</div>
</a>
<a href="http://www.page.com/storybook">
<div class="preview">
<img src="http://www.clipartbest.com/cliparts/RiA/6a5/RiA6a5eoT.jpeg" title="Digital Story Books" alt="" />
<div>
<div>
<h2>Digital Story Books</h2>
</div>
</div>
</div>
</a>
How can I line them up so that there is a half an inch of space in between?
Here is a preview of what I have:
http://jsfiddle.net/FZ2rZ/
This should do it:
.preview {
display: inline-block;
margin: 0 40px 0 0;
}
Inline-block for the div containing the image will display the images in a row as you'd like. The margin applies 40px to the right side of the images.
By default images are block elements, meaning they will take up the entire width of the page. Inline elements (like an or tag) do not collapse and will be on the same row. Learn more about display CSS property.
*edited to correct margin instead of padding.
Avoid float if you can. Floating is for a limited scenario. Usually it is appropriate to use display:inline-block;. That said, when you do, any space you have inbetween tags will also be displayed (you're making it "inline" and spaces are inline, too.)
You can take what you have an add this CSS:
a {
display:inline-block;
}
a:not(:first-child) {
margin-left:.5in;
}
Then, delete the space here
</a>
<a href="http://www.page.com/storybook">
to get
</a><a href="http://www.page.com/storybook">
Here's your modified fiddle.