I am inserting text into a class <span class="span4 offset4"> using templates. In the css, I used text-align: centre; but the text is not centering. It's pushed to the left side of the div. I can see this because I also color the background of the div when I put the text in it. I even tried to wrap the message in <p> tags but it's not doing anything. Can you tell me what I'm doing wrong?
<p>{{= message }}</p>
html
<div class="row">
<span class="span4 offset4"></span>
</div>
css
.span4.offset4
{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 15px;
font-weight: bold;
min-height: 25px;
text-align: centre;
}
It's center, not centre. Moreover, display: inline elements don't work with text-align. Make the span display: block or something.
Give text-align:center to your parent div inside row class.
try adding these lines to css
//to define size of div
.row
{
width:30%;
}
then add these lines to .span4.offset4
margin:auto auto;
Related
An Example: Only DIVs, that containing a LABEL should get the style text-align: right
Following try did not work:
div label:only-child {
text-align: right;
}
Not the label but the div should get this style.
you can use this way
div class="test" style="text-align:left"
div class="test" style="text-align:right"
The solution is to set the width of the label and display property to block. Here's the code
div{
width: 500px;
padding: 20px;
background: #fff;
border: 1px solid #ddd;
}
div>label:only-child{
text-align: right;
width: 100%;
display: block;
}
<div>
<label>adfasdf</label>
</div>
this cannot be done with CSS .
CSS = Cascading Style Sheets so by definition you can select elements from top to bottom of the HTML structure, not the other way around.
so you can't select a parent depending on it's children
you can do this with JQ , there are a number of ways to do it but this would be one of them :
$( "div:has(label)" ).css({ "text-align":"right" });
.div {
height:50px;
border:2px solid red;
margin:2px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<label>Has Label</label>
</div>
<div class="div">
<p>
i am NOT a label
</p>
</div>
<div class="div">
<label>Has Label</label>
</div>
You can't style parent element based on child element using CSS.
Since, it seems that you are trying to align the label element to right, you can do that using float as shown below:
div label:only-child {
float: right; /* instead of text-align: right */
}
Updated (parent has flexbox layout):
div label:only-child {
flex: auto;
text-align: right;
}
You cant't do this in CSS only. Well, of course you can add class to div but there is no parent selector.
But there will be in the future (selectors lvl4 - see last row of selectors overview): https://www.w3.org/TR/selectors4/
I'm working on a project where there is a row of controls, each of which is a button element. There is content inside of the buttons, and they are laid out in a row with flexbox. The button element centers its content vertically, and I can't figure out how to override it to vertically align it at the top of the button. The controls all need to be the same height and same width, and clicking anywhere in the borders must count as a click on the button.
This Codepen shows the problem clearly: http://codepen.io/anon/pen/RPpqdz
.wrapper {
display: flex;
flex-direction: row;
width: 80%;
}
button,
.object {
font-family: sans-serif;
font-size: 1em;
padding: 1em;
background: #fff;
flex: 1;
border: 1px solid red;
text-align: left;
}
<h1>What it looks like</h1>
<div class="wrapper">
<button>I am Content</button>
<button>I am Much Longer Content That Goes Here and Here</button>
<button>I am Content</button>
</div>
<h1>What I want it to look like</h1>
<div class="wrapper">
<div class="object">I am Content</div>
<div class="object">I am Much Longer Content That Goes Here and Here</div>
<div class="object">I am Content</div>
</div>
I realize this issue could be solved by not using button elements, but I also feel like I SHOULD be able to override this behavior of button elements. I'd like to figure this out for my own sanity!
Firstly, having h2 and p inside button is not valid HTML.
Secondly, there is no simple way to control the position of elements in a button, especially vertically.
But if you really really must use this BROKEN HTML, and only the top alignment is important, you can force the elements to take up fixed heights so that the button will align them at the top, like so:
button > h2 {
height: 48px;
}
button > p {
height: 16px;
}
I must say this is still not exactly the same as using <div>, so I don't know if this is sufficient.
In any case, do seriously try to convince those in charge of the "larger context of the project" to use proper valid HTML.
Edit:
If only inline elements are used inside the button, the problem becomes more manageable. The only caveat is: you need to know beforehand the height of the button. You can then simulate top-bottom flow using paddings.
button {
padding-top: 1em;
padding-right: 1em;
padding-bottom: 5em; /* make sure bottom + top padding == height */
padding-left: 1em;
height: 6em;
}
Still probably not ideal - feels like a heavily plastered hack solution.
*I'm not sure what do you want and what do you mean by "how to override it to vertically align it at the top of the button?"? but I hope this code is what you want.(same height, width and even with spaces also buttons matching with div (.objects).
.wrapper {
display: inline-flex;
display: -moz-inline-box;
width: 90%;
}
button, .object {
font-family: sans-serif;
font-size: 1em;
padding: 1em;
background: #fff;
border: 1px solid red;
text-align: left;
margin: 0em 0.3em 0em 0em;
}
Alright, so I'm trying to make a line of different text bits in html/css. This will be the precursor for a navbar. My HTML is:
<div id="navBar">
<p class="navBartext">About</p>
<p class= "navbartext">News</p>
<p class= "navbartext">Contact Us</p>
<p class= "navbartext">Jobs</p>
</div>
and the CSS:
.navBartext{
text-align: center;
color:black;
font-size: 20;
font-family: 'Poiret One', cursive;
display: inline;
padding-right: 20px;
}
#navbar{
width: 100%;
height: 50px;
}
Now, when I take the "display: inline;" out of the code, the text aligns vertically instead of horizontally, and then I can use text align to position it, but I want them all in one line. When I use display-inline though it seems to completely circumvent the text-align function (as anything put in here will be ignored). Is there something I'm missing? Perhaps I just don't know enough about the display function.
If you want to align the words horizontally, you have to use display:inline-block; so that the elements will be treated as text. Always use inline-block for the child elements and text-align:center; for the parent.
p{
color:black;
font-size: 20;
font-family: 'Poiret One', cursive;
display: inline-block;
padding-right: 20px;
}
#navbar{
width: 100%;
height: 50px;
text-align:center;
}
VIEW DEMO
Try this, you can use <ul> element instead of div, div is better as a wrapper if u need wrap navBar:
[http://jsfiddle.net/WT7qv][1]
http://jsfiddle.net/WT7qv
Thanks for taking your time for my question.
I know, this question has been asked and answered before, but somehow i can't make it look like expected. I will show you below some of the things I've tried.
I have a div with a rounded boarder where i want to display a caption (one of the standard captions - ).
This is what i've got:
HTML:
<div id="selectModel" class="admin_dropdown">
<h5 class="admin_caption">Wählen sie das anzuzeigende Model</h5>
[...]
</div>
CSS:
h5.admin_caption {
width: 300px;
margin-top: -20px;
margin-left: auto;
margin-right: auto;
background: white;
}
I am not allowed to post pictures (<10 rep), so I hope jsfiddle works).
How it looks like: http://jsfiddle.net/vrP39/
What i want it to look like: http://jsfiddle.net/vrP39/1/
As you can see, the result of the last fiddle is achieved through changing the width until it matches the caption. Of course i want to use it with several captions with different length, so this is not an option.
What i've tried so far:
Using a <span> around the text in my caption, also styling the <span> element instead of the <h5>
display: inline-block or display: inline
float: left in the <h5> and clear:left in the following element
I saw this post (amongst others) here on stackoverflow (Width of Headers (H1, H2 etc)) but nothing that i tried seems to work.
What did i do wrong? Any help is greatly appreciated, thanks in advance!
Seems like you are trying to reproduce a <fieldset> element. So why not use that element?
<form>
<fieldset>
<legend>Wählen sie das anzuzeigende Model</legend>
<select id="selectModelDDL" onchange="createTable(this);">
<option value="1">1</option>
</select>
</fieldset>
</form>
With the <fieldset> you will create the border around the elements where the <legend> is the text that is on the border.
Now you can just align the text to the center:
fieldset
{
text-align: center;
border: 1px solid black;
border-radius: 15px;
font-weight: bold;
font-size: 13px;
padding: 10px;
}
jsFiddle
Working with your current code, you can do this : http://jsfiddle.net/vrP39/6/
Add a <span> inside the h5 (for the background colour)
<h5 class="admin_caption"><span>Wählen sie das anzuzeigende Model</span></h5>
And for the CSS
h5.admin_caption { text-align:center; margin-top: -20px; }
h5.admin_caption span { display:inline-block; background:#fff; padding:0 5px;}
The first bit centres the text, and then we have to add in a background to hide the black border line.
The span needs to be set to inline-block, so we can add a bit of padding on the left and right, as you can't do that if the span> element is using the default display:inline property.
You can also try to wrap the caption in a div:
HTML:
<div class="container">
<div id="selectModel" class="admin_dropdown">
<div class="caption_wrapper">
<h5 class="admin_caption">Wählen sie das anzuzeigende Model</h5>
</div>
<select id="selectModelDDL" onchange="createTable(this);"></select>
</div>
CSS:
div.caption_wrapper {
margin: 0 auto;
text-align: center;
height: 1px;
}
h5.admin_caption {
background: #FFF;
display: inline-block;
position: relative;
top: -20px;
margin: 0;
}
http://jsfiddle.net/vrP39/9/
Is this what you're looking for? http://jsfiddle.net/fatgamer85/33c4N/
max-width: 30px;
overflow: hidden;
I've given a max-width and hidden the overflow to get the desired effect.
I was wondering if something was possible to do in CSS. Basically i want to recreate the text on the RHS of the image using html/css, but currently I'm getting the LHS of the image.
The HTML:
<div id="banner">
<div id="text">
<p>This is an example of what I have</p>
</div>
</div>
The CSS:
div#banner { background: green; width:300px; height:300px;}
div#text { margin: 20px auto; }
div#text p { background:#fff; padding: 5px; margin: 5px; font-size: 2em; }
Now I realise that this can be done already either by:
Using an image
Using separate p tags
(By Point 2 I mean:
<div id="banner">
<div id="text">
<p>This is an</p>
<p>example of</p>
<p>what I have</p>
</div>
</div>
)
But what I would really like to know is if it's actually possible to do what is on the RHS of the image, using only css and a single p tag?
alt text http://chris.carrotmedialtd.com/example.jpg
You can achieve your desired effect by using:
display: inline; to force the background styling on the p to apply to the text, rather than the block on the p, and
line-height: 2.2em (slightly more than your font size) to force lines between your text
like such:
div#text p {
display: inline;
background: #fff;
padding: 5px;
margin: 5px;
font-size: 2em;
line-height: 2.2em;
}
Because a paragraph tag is a block element, the background will be painted between lines. If you change it to an inline element, or wrap the text in an inline element, you should be able to get the effect you want.
<p><span>This is an example of what I have</span></p>
span {
background: #fff;
}