I'm not very good at CSS, I guess that will we easy to one of you.
Look at image below, i'm trying to center my text but center it with the div parent's width, as if there was no button, but I don't know how to proceed.
<div class="parent" style="width:500px;">
<div class="container" style="width:400px;"> My text here </div>
<button style="width:100px;">My Button</button>
</div>
I tried :
.parent { text-align: center; }
but that center the text with the .container width (so at 200px) but i'm looking for a way to center it a 250px here (.parent width)
I think about doing that with a padding-left but that's not a "clean" method in my case because button is not always displayed.
If someone knows how can I do that please :)
image:
One option would be to use absolute positioning on the button!
.parent {
position: relative; // position the button within the parent div
}
button {
position: absolute;
right: 0;
top: 0; // or whatever, position it where you want it
}
.container {
padding-right: 100px; // so the text doesn't overlap with the button
padding-left: 100px; // so the text is balanced
text-align: center;
}
EDIT:
And when the button isn't needed, you could use a conditional on the parent --
.container--with-button {
padding-right: 100px;
padding-left: 100px;
}
.container--without-button {
padding: 0;
}
If I understand you right then all you'll need to do is add a text-align property to your div.
.div { text-align: center }
I made a quick example that matches your diagram here, hope it helps.
https://jsbin.com/qubeqezama/7/edit?html,css
From what I see you only need to add display: block; to the .parent element. That way they'll be both displayed as a block and then all the text will be centered. ;)
Related
On my Drupal 7 website, I'm having three blocks in an environment, called 'Topbar links', with the following layout: http://jsfiddle.net/Jeroen94/54L57/1/.
Mind that the first and third block are Nice Menus. I don't provide all the code, because most of it isn't relevant, but the layout should be maintained. The three blocks are displayed at the right, but now, I'd like to display 'Nice Menu 1' to the left and keep 'My Profile' and 'Nice Menu 2' to the right. I thought
.menu-1 {
left: 0;
}
would do the trick, but that doesn't work, because I couldn't overwrite the right. Maybe right: ...px could do the trick for 'Nice Menu 1', but I don't find that a nice solution, because the width from 'Topbar links' can still change in the future, causing a layout break.
How can I solve this?
I'd go about this using float, like this
.topbar-links {
position: absolute;
right: 0;
top: 0;
vertical-align: top;
width: 100%;
}
.topbar-links div {
float:right;
clear:right;
}
#block-1 {
float:left;
}
http://jsfiddle.net/Y7mwW/
The problem is that you are positioning the parent div to the right and not setting a width - the children of the div can only be positioned within the constants of the parent div
You can also use the :first-child selector to select the first and this will eliminate the need for a separate class.
Try
<div class="topbar-links">
<div id="block-1">Some content</div>
<div id="block-2">Some content</div>
<div id="block-3">Some content</div>
</div>
.topbar-links {
position: absolute;
right: 0;
top: 0;
vertical-align: top;
width: 100%;
}
.topbar-links div {
float: right;
}
.topbar-links div:first-child {
float: left;
}
JSFiddle http://jsfiddle.net/JC9ac/
Another solution to stop the switching around of elements that you mentioned jsfiddle.net/JC9ac/2
Update your css with following code:
.topbar-links{
text-align: right;
}
.block-1{
float: left;
}
If you need to view blocks inline add
#block-1,
#block-2,
#block-3{
display: inline;
}
fiddle
I have a parent container div and 2 sub ones in it, one to the left of the parent and one in the horizontal middle. how can I do that using css? suppose the html code is like this:
<div id="ParentContainer">
<div id="SubContainerToLeft"></div>
<div id="SubContainerInHorMiddle"></div>
</div>
Here you go: :)
http://jsfiddle.net/bzUSY/
Try this.
#ParentContainer {
height: 100px;
width: 500px;
}
#SubContainerToLeft {
float: left;
width: 50%;
}
#SubContainerInHorMiddel {
margin: auto;
width: 50%;
}
And then just play with margin and padding as much as you like. You know what margin and padding is, right?
I'm looking for a way to create toolbar buttons uisng jquery ui.
I tried to create button using
<div id='menubar_home' style='vertical-align: middle;width: 20px; height: 20px;'>
</div>
and using
$('#menubar_home').button({
icons: { primary: "ui-icon-home" }
});
But image in button is not centered:
How to center image in button ?
#menubar_home {
display:table-cell;
vertical-align: middle;
text-align: center;
}
I assume there isn't transparent sides in the image.
Adds a border to img to work on positioning: border: 1px solid red;
Then check the image has a display: block; property.
Try to add margin: 0 auto; property, which aims to center a block (your image).
You will perhaps need to add !important to force the property: margin: 0 auto !important;
Hoping to help you (not sure, not easy without manipulating the code myself).
Add a padding:8px; to the button/input style to allow the icon to be properly aligned.
You could also place a span within the div like so:
<div id="menu-bar-home">
<span class="ui-icon ui-icon-home"></span>
</div>
reference it in css and change the position:
div#menu-bar-home {
position:relative;
}
div#menu-bar-home > span {
position: absolute;
left: +or-(n)px; /* so just adjust the position
}
also note you may have to adjust the z-index of the span.
best o' luck, bro.
EDIT: you may still achieve the results you want in this manner, but I though you were creating the button with the div.
As the gentleman below suggests, I would set the css for menu bar as such:
div#menu-bar-home
{
display: table-cell;
vertical-align: middle;
text-align:center;
}
I ended up doing the following in CSS:
#menubar_home {
font-size: 0;
width: 23px; top: 5;
height: 23px;
}
This is my code snippet :
Html
<div class="app-cont">
<div class="app-head">
Additional Comments :
</div>
<div class="app-main">
balallalalalallalalalala
<br/>
jaslnflkasnlsnlksanlknslnwkin
<br />
lknlkanfklnlk
</div>
</div>
CSS:
div {
color:white;
}
.app-cont {
background: black;
width: 90%;
padding-top: 2.5px;
padding-bottom: 2.5px;
margin-bottom: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.app-head {
background: #484848;
width: 25%;
margin-bottom: auto;
display: inline-block;
border-top-right-radius:2px;
-moz-border-top-right-radius:2px;
border-bottom-right-radius:2px;
-moz-border-bottom-right-radius:2px;
}
.app-main {
display: inline-block;
text-align: justify;
}
demo
It works till i dont add enough content on the div with class app-main. But when i add enough content in the div the div with class app-head gets to the bottom.
While i want it in the middle.
How can i do this ?
Just add vertical align style.
.app-head,.app-main{
vertical-align:middle;
}
You can use it on inline-block elements to position near other inline-block elements or near inline elements.
Well I wasn't sure entirely what the goal was, but if I understood you correctly, you wanted to keep the block holding the additional comments text in the middle of the text to the right?
I've updated your fiddle to see if I've got the solution you need: Updated Fiddle
I've positioned .app-head absolutely, and used a top:50% and a negative margin to keep it centred vertically. You also have to give .app-cont a relative position for this to work, and the comments section needs a left-margin slightly greater than the width of .app-head.
Anyway, hope that helps!
I did some other changes as well..
http://jsfiddle.net/Ues8Q/4/
..but the main idea is this:
Outer container has: position: relative;
The thing you want to center has: position: absolute; left: 0px; top: 50%; margin: -exactly half of the height of this element; height: whatever it is;
and requirement is that the element you want to center has fixed height...
I have a CSS element, with a border around it, that could have one or multiple boxes in it, so the width of the entire div changes depending on how many boxes are present inside of it. However, I want this whole div to be centered on the screen.
Usually, to center things, I just use:
margin-left: auto;
margin-right: auto;
But, this time, I have to either float the element or make it inline-block so the size of the div will be resized to the content, and if I do that, the margin-left and margin-right auto does not work, it always just stays on the left side of the screen.
Currently I have:
#boxContainer {
display:inline-block;
clear:both;
border:thick dotted #060;
margin: 0px auto 10px auto;
}
I also tried with float: left instead of display: inline-block.
Does anyone know of a good way to both center a div and allow it to be resized to content simultaneously? Any help would be greatly appreciated.
Have you tried keeping it inline-block, and putting it inside a block-level element that’s set to text-align: center?
E.g.
HTML
<div id="boxContainerContainer">
<div id="boxContainer">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
</div>
CSS
#boxContainerContainer {
background: #fdd;
text-align: center;
}
#boxContainer {
display:inline-block;
border:thick dotted #060;
margin: 0px auto 10px auto;
text-align: left;
}
#box1,
#box2,
#box3 {
width: 50px;
height: 50px;
background: #999;
display: inline-block;
}
Seems to work as you describe: http://jsfiddle.net/pauldwaite/pYaKB/
Unfortunately, this cannot be achieved through CSS solely I don't think. You could always use JavaScript to center the div once you know its width (i.e. after the boxes have been appended) for example:
$(document).ready(function() {
var itemWidth = $('#boxContainer').width();
var availWidth = $(screen).width();
var difference = availWidth - itemWidth;
$('#boxContainer').css('margin: 0 ' + Math.round(difference / 2) + 'px');
});