I have a DIV tag that contains 2 tags. I want these figures to center themselves within the DIV, which is supposed to be centering itself within the middle of the page. How do I do this?
HTML:
<div class="images-captions">
<figure><img src="images/Prop Pics/From Mike B aka StratosDadRI/intial-blueprinting_thumb.jpg" alt="Intial Blueprinting"><figcaption>After intinal blueprint</figcaption></figure>
<figure><img src="images/Prop Pics/From Mike B aka StratosDadRI/after-damage_thumb.jpg" alt="After Damage"><figcaption>After damage</figcaption></figure>
</div>
CSS:
.images-captions { width: 600px; margin: 0 auto; }
.images-captions figure { float: left; width: 250px; padding: 10px;}
.images-captions figcaption { text-align: center; font-style: italic; }
Center them horizontally
This case I would solve like this:
CSS
.images-captions {
width: 600px;
margin: 0 auto;
text-align: center;
}
.images-captions figure {
display: inline-block;
width: 200px;
margin: 0;
padding: 10px;
}
.images-captions figcaption {
font-style: italic;
}
Demo
Try before buy
Center them vertically
You can solve it like this:
CSS
.images-captions {
width: 600px;
margin: 0 auto;
text-align: center;
}
.images-captions figure {
width: 200px;
margin: 0 auto;
}
.images-captions figcaption {
font-style: italic;
}
Demo
Try before buy
You can solve it by adding the text-align to the figure
.images-captions figure { float: left; width: 250px; padding: 10px;text-align:center}
.images-captions figcaption { font-style: italic; }
For understanding:
You want to align the text in the parent conatainer. So you have to add the attribute to the parent element and not the element itself
DEMO on fiddle
Related
I can't seem to understand why certain span properties (in particular, the width and text-align of "controller-row-number" and "controller-row-name"):
#controller {
width: 250px;
float: left;
font-size: 14px;
line-height: 1.5;
text-align: left;
}
.controller-row {
background-color: blue;
}
.controller-row-number {
background-color: yellow;
width: 60px;
text-align: right;
padding: 0 15px 0 0;
}
.controller-row-name {
background-color: orange;
width: 150px;
text-align: left;
padding: 0 0 0 0;
}
Are being ignored in the following code:
<div id="controller">
<div class="controller-row">
<span class="controller-row-number">1</span>
<span class="controller-row-name">First Name</span>
</div>
<div class="controller-row">
<span class="controller-row-number">2</span>
<span class="controller-row-name">Second Name</span>
</div>
</div>
I have a JSFiddle located here:
http://jsfiddle.net/WZFJD
Can anyone point me to the correct edits to make, so that the styles are adhered?
Thanks!
display: inline-block; to the rescue !
Fiddle
.controller-row-number {
background-color: yellow;
width: 60px;
display: inline-block;
text-align: right;
padding: 0 15px 0 0;
}
.controller-row-name {
background-color: orange;
width: 150px;
display: inline-block;
text-align: left;
padding: 0 0 0 0;
}
span elements are by default inline, so you have to make them block, or inline-block if you want your width rule to be applied, otherwise they just take up enough width to fit. The width and height of display: inline; elems cannot be set as you tried to do. Tho you can fake the height using line-height.
Spans are displayed as inline by default, if you want to specify a width you'll have to set display: inline-block.
width cannot be applied to an inline element like a <span>. You will have to also style your spans of class controller-row-number and controller-row-name to be display: inline-block
How can I get that yellow box aligned like on the picture? I tried some stuff with table cells but it kinda destroyed everything. I also played a bit with the float conditions but the results were horrible too. Can you help me?
Here's my code:
HTML
<div class="job_board">
<div class="job_box">
<span class="job_title_working_field"> <!-- Just made that span for grouping but it's unnecessary. -->
<div class="job_title"><h1>Product Development <span class="light">(m/w)</span></h1></div>
<div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div>
</span>
<div class="slide_button"></div>
</div>
</div>
CSS
.light {
font-weight: normal;
}
.job_box {
width: 100%;
padding: 30px 50px;
background-color: #082730;
color: white;
text-align: center;
display: table;
}
.working_field {
font-weight: bold;
margin: 0;
font-size: 0.8em;
}
span.job_title_working_field {
table-cell;
}
.slide_button {
position: absolute;
width: 50px;
height: 100%;
background: yellow;
display: table-cell;
}
JSFiddle
Since .slide_button is within an element, you would simply relatively position the parent element:
.job_box {
position: relative;
width: 100%;
padding: 30px 50px;
background-color: #082730;
color: white;
text-align: center;
display: table;
font-family: "Helvetica", sans-serif;
}
And then absolutely position the yellow .slide_button element at the top/right - relative to the parent.
UPDATED EXAMPLE HERE
.slide_button {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 100%;
background: yellow;
}
If you look at the above example, you will notice that a horizontal scrollbar is present. If you want to remove this, use box-sizing:border-box in order to include the padding within the .job_box element's dimension calculations.
UPDATED EXAMPLE HERE
.job_box {
box-sizing:border-box;
-moz-box-sizing:border-box;
}
It's also worth noting that I removed the default 8px margin on the body element.. body{margin:0}
I changed the markup order a little and updated the css
you are combining too many styles: table-cell + absolute + float don't mix well
http://jsfiddle.net/pixelass/3Qqz4/2/
HTML:
<div class="job_board">
<div class="job_box">
<div class="slide_button"></div>
<div class="job_title_working_field">
<div class="job_title">
<h1>Product Development <span class="light">(m/w)</span></h1>
</div>
<div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.light {
font-weight: normal;
}
.job_box {
width: 100%;
background-color: #082730;
color: white;
text-align: center;
display: block;
font-family:"Helvetica", sans-serif;
position: relative;
height: 120px;
vertical-align: top;
}
.job_title h1 {
margin: 0;
}
.working_field {
font-weight: bold;
margin: 0;
font-size: 0.8em;
}
.job_title_working_field {
padding: 30px 50px;
}
.slide_button {
width: 50px;
height: 100%;
background: yellow;
float: right;
}
I am trying to work with markup that someone else has created. My problem is that I have set the width of a parent container for use on other elements, but want to over-ride this on one specific child container that I can target using .ticket13 .text b and set it to 400px. However this doesn't work.
If you check out this jsfiddle you can see the problem. How can I get .ticket13 .text bto be 400px wide without changing the markup?
<div class="left-container">
<div class="ticket13">
<p class="text">
<b> I want this container to be 400px wide </b>
</p>
</div>
</div>
.ticket13 .text b { width: 400px !important; }
p.text {
display: inline;
margin: 5px;
padding: 0;
}
P.text {
font-size: 1em;
font-style: normal;
margin: 0;
padding: 0.3em 0.3em 0;
text-align: left;
text-indent: 0;
width: auto;
}
.ticket13 {
display: inline;
float: left;
width: 186px;
}
.ticket13 {
border: medium none;
float: left;
margin: 0;
padding: 0;
}
.left-container {
background-color: red;
float: left;
text-align: left;
width: 60%;
}
You'd have to make the b a block level element, by either setting it's display to block or inline-block.
Put the markup for the child BELOW the markup for the parent. You shouldn't even need to use !important
Try use that:
.ticket13 .text b {
width: 400px !important;
display: inline-block;
}
To do that you have 2 solutions:
.ticket13 .text b {
width: 400px!important;
display: block;
}
or
.ticket13 .text b {
width: 400px!important;
float: left;
}
I am trying to add text to center of the page. Even if a user try to resize the page, text in the page should be aligned to center. I am close to the solution but missing some position in the code. Here is my code. Any help would be highly appreciated.
html code
<div class="errorMessageContainer">
<div class="errorMessageIcon">
:(
</div>
<div class="errorMessageHeaderContainer">
<div class="errorMessageHeader">
I am trying to center me in a page.
</div>
<div class="errorMessageText">
<span class="errorMessageSubHeader">I want to float.</span>Even if page is restored or forced minimized. <span class="errorContact">Please </span> help me on this.
</div>
</div>
</div>
css code
body {
background-color: #666666;
}
.errorMessageContainer {
width: 620px;
margin: 200px 0 0 300px;
}
.errorMessageIcon {
font-family: Segoe UI Semibold;
font-size: 72px;
color: #29abe0;
display: inline-block;
vertical-align: top;
}
.errorMessageHeaderContainer {
display: inline-block;
width: 500px;
padding: 20px 0 0 30px;
}
.errorMessageHeader {
font-family: Segoe UI Light;
font-size: 28px;
color: #ffffff;
}
.errorMessageSubHeader {
font-weight: bold;
}
.errorMessageText {
font-family: Segoe UI;
font-size: 13px;
color: #ffffff;
width: 450px;
}
.errorContact a {
color: #ffffff;
text-decoration: underline;
}
this will put your message container in center of the page :
.errorMessageContainer {
width: 620px;
height: 100px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -310px;
margin-top: -50px;
}
see the fiddle
Try this:
.errorMessageContainer {
width: 620px;
margin: 200px auto 0;
}
You can use margin: 200px auto 0 auto; for the .errorMessageContainer see fiddle here: http://jsfiddle.net/DSATE/
.errorMessageContainer{
position: absolute;
height: 200px;
width: 400px;
margin: -100px 0 0 -200px;
top: 50%;
left: 50%;
}
The best approach is to set up your display and margins correctly. Do not set values for this otherwise it will fail if the div changes in size. heres an example I made up using a div wrapper and the value display:table-cell
DEMO http://jsfiddle.net/kevinPHPkevin/DSATE/1/
I'm attempting to center the logo within my header. I tried the display:block and margin:auto within my #site-title class, but it isn't working.
The link to the code is: http://pastebin.com/iNvhTSBL
And the CSS is: http://pastebin.com/f5mPTjuU
I'm not sure what to do...maybe I'm not doing the CSS correctly?
Any help would be appreciated! The CSS was from a wordpress theme, just letting you all know.
Thank you!
Next time, post only the relevant code bits in your question. That makes it MUCH more likely people will bother to answer.
If this is the code you are referring to:
<div id="header">
<div id="site-title">
<img src="http://i.imgur.com/ysxPP.jpg">
</div>
<!-- other bits stripped for brevity -->
<div class="clear"></div>
</div>
and the css is this:
#header {
border-bottom: 1px solid #dedfe0;
padding-bottom: 50px;
}
#site-title {
float: left;
width: 100%;
padding-right: 40px;
overflow: hidden;
line-height: 27px;
font-size: 23px;
display:block;
margin: auto;
}
#site-title a {
color: #333;
font-weight: bold;
text-decoration: none;
}
Then you need to revise the css as follows:
1. remove the float: left from the site-title. Unecessary.
2. Note that your padding-right of 40px is going to cause problems with your width: 100%
3. Add text-align: center; to the site-title.
4. Add margin: 0 auto; to your site-title a
The following code will do what you want:
#header {
border-bottom: 1px solid #dedfe0;
padding-bottom: 50px;
}
#site-title {
width: auto;
padding-right: 40px;
overflow: hidden;
line-height: 27px;
font-size: 23px;
text-align: center;
}
#site-title a {
color: #333;
font-weight: bold;
text-decoration: none;
margin: 0 auto;
}
Add this to #site-title
text-align: center;
This should work:
#header {
width: 500px;
margin: 0 auto;
}
</style>
<div id="header">
<!-- div content here -->
</div>