<div>
<span style= "background: red; text-align: center;">
There is an error
</span>
</div>
The text align center isnt working. I want the text to be center with background.
https://jsfiddle.net/yv246re9/
span tags are inline elements and won't center, you need to wrap the text with a element that takes the width of the content like <p> or <h1>, or you can add the text-align: center to the parent <div> element.
Try this :
<div style="text-align: center; width:100%;">
<span style= "background: red; ">
There is an error
</span>
</div>
The span will be positioned in the center according to the parent div which has a width: 100%
You need to add display: block; after text-align: center;. The span is not a block-element but a inline-element.
For more information: https://www.w3schools.com/tags/tag_span.asp
Have a good day !
Related
How can I make the following span to be left-aligned with its parent, in this case, the DIV with id of “rightPanel”?
Currently, the following code displays the span content to the right with Safari browser.
<div id="rightPanel">
<span style="background-color:##ACE1AF; white-space:nowrap;">
my stuff goes here...
</span>
</div>
Thanks.
Use the following CSS:
#rightPanel {
text-align: left;
}
Or, if you want to use inline styles (not recommended) as you did in your span tag:
<div id="rightPanel" style="text-align: left">
Issue is that i am trying to vertically align text within neighboring divs in a bootstrap 3 row where one cell has text of varying size. the text in neighboring cells aligns along the top, but i need it to align along the bottom.
Fiddle of the problem: http://www.bootply.com/GqKdUa9uxT
Yes, i have searched and have surprisingly not found an adequate answer:
vertical-align with Bootstrap 3
does not help for example as i am trying to align the text, not the div.
thanks, airyt
You can align text to the bottom in the right div by using "position:relative" for parent div and "position:absolute" for a child, then you can adjust the position by changing the value of a bottom property according to your need.
The HTML code:
<div class="container">
<div class="row">
<div class="col-sm-6">
Here is some text (Text A) <span style="font-size: 40px">Text B</span>
</div>
<div class="col-sm-6 bottom-align">
This text needs to be (bottom) ed with Text A in previous cell.
</div>
</div>
</div>
and the CSS styling:
.row {
position: relative;
}
.bottom-align {
position: absolute;
bottom: 0px;
right: 0;
border-bottom: 1px solid red;
}
.border{
border-bottom: 1px solid blue;
}
Please check the fiddle:
http://jsfiddle.net/johannesMt/craLuLpb/
You can't vertically align floated wrappers, you need to change it to inline element.
DEMO
.col-sm-6 {
display: inline-block;
vertical-align: bottom;
float: none;
width: 50%;
}
<div class="container">
<div class="row">
<div class="col-sm-6">
Here is some text (Text A) <span style="font-size: 40px">Text B</span>
</div><div class="col-sm-6">
This text needs to be (bottom) aligned with Text A in previous cell.
</div>
</div>
</div>
Don't use .col-sm-6 since this will overwrite bootstrap grid system, give it another name
CSS question: I'm wanting a container with 3 inline images with a border around them (not each image). Under the image row and inside the container border I want a sentence or two of text. Without the text the container border is about the same width and height as the image row using display:inline-block, once I add the text the container width is 100%. I want the text to wrap under the image row and not expand beyond the left/right sides of the image row. I would like to know how this can be done and if it can be done using float:left and/or display:inline, display:inline-block. If it can be done both ways what are the pros and cons.
HTML:
<div class="container">
<img src="image1">
<img src="image2">
<img src="image3">
some text
</div>
CSS:
.container {
display: inline-block;
border: 1px solid black;
}
The following will create a div, with inner blocks for images and a block for text. They should both stay 500px. If the images are > 500px they will be clipped. The text won't cause it to overflow unless its a very long uninterrupted string.
If this doesn't help, use jsFiddle to put up an example.
CSS
.container {
width: 500px;
overflow: hidden;
background:red;
display: inline-block;
border: 1px solid black;
}
HTML
<div class="container">
<div class="images">
<img src="image1">
<img src="image2">
<img src="image3">
</div>
<div class="caption">
some text
</div>
</div>
This is a good example of what I'm wanting but with the text below the images. I would also like it to be HTML 5 compatible.
<div class="container">
<table>
<tr>
<td><img src="image1.jpg" height="200"></td>
<td><img src="image2.jpg" height=200"></td>
</tr>
<caption>a paragraph of text here...</caption>
</table>
</div>
.container {
display: inline-block;
border: 1px solid;
}
table {
margin: 0 auto;
}
Based on my earlier thread I'm trying to use and understand the recommended way to align two divs horizontally using the overflow element.
With my short text the two divs align correctly, but when I add loner text it drops below the image. Can anyone explain why this is happening and how do I fix it?
My JSFIDDLE
HTML:
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="wall-thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
</div>
CSS:
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
div.left {
padding:5px;
float: left;
}
div.right {
float: left;
}
.thumb-small{
width:35px;
height:35px;
border: 1px solid #B6BCBF;
}
Floats expand to try to encompass their content. They generally expand up to the width of the containing region, regardless of how they are positioned. That is why it is going to a new line when the text is really long.
For what you are doing, I believe you want the image to the left of some text. This is done by having the outer region set with clearfix CSS (to always encompass all floats):
.container {
overflow: hidden;
min-width: 1px;
}
/* IE7+ */
*+html .container {
min-height: 1%;
}
Then, only float your image to the left. Do NOT float your content. Add margins around the image as desired. So something like:
.left {
float: left;
margin: 0 10px 10px 0; /* 10px on right and bottom */
}
The content in the div will then act like you are expecting.
Remove the float rule on the long text (jsFiddle example). When en element is floated after another floated element, it can't come before it vertically.
<div>
<div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
See the W3 for the long version:
The outer top of a floating box may not be higher than the outer top
of any block or floated box generated by an element earlier in the
source document.
Remove the float:left; on the rule and it will work. However, you may want to improve and test in ie 6+.
You have to set max-width attribute to restrict your text form taking as much space as available and to get maximum space its going to next line.
http://jsfiddle.net/a6BbD/1/
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;max-width:400px">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
</div>
<br>
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;">Some short text here</div>
</div>
</div>
The recommendation says you should always set width on floated elements.
the below link has great material to understand floats..
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Basically I have two pieces of text and an image.
<div class="container">
<span class="title">Text</span>
<img src="an_image.png" />
<span class="note">Other Text</span>
</div>
I want all the elements to be at the bottom of the container div, the title to aligned to the left, and the note all the way to the right. The image will be right next to the title and aligned to the bottom of the title text. So far the only way I have gotten this to work is by using relative/absolute position. Is there a way to do this with CSS?
Here is an image of what I am trying to accomplish. I can change the width and height of the container and the title, image, and notes will align properly to the bottom, left, and right just like so:
Try this
<style type="text/css">
.container { vertical-align: baseline; position: relative; border: solid 1px Gray; }
.note { position: absolute; right: 0; bottom: 0; }
</style>
<div class="container">
<span class="title">Text</span>
<img src="an_image.png" height="100" width="100" />
<span class="note">Other Text</span>
</div>
Sorry, Updated solution... Here's the working link
You can try to play around with the vertical-align, but it's kinda evil..i usually use the absolute position. You can test by yourself on the W3C Tryit Editor