I've read some Q&A about centering some text inside a div but for some reason the examples I try are not working for me. I'm using some jquery-ui and jquery-mobile css libraries but I don't think that is my problem. The "blue button" seems to align vertically in the middle just fine. But why don't the two text columns?
Here is the jsfiddle link: http://jsfiddle.net/Thread7/tstwwt9p/
<br/><br/>
<div class="ui-grid-b" style="display: table;width: 100%;border-style: solid;">
<div class="ui-block-a" style="text-align:center;">
<button style="color:#000;background-color:#00b2ee" class="ui-btn ui-shadow ui-corner-all" type="button">Blue Button</button>
</div>
<div class="ui-block-b " style="text-align:center;display: table-cell;">Middle Column Text</div>
<div class="ui-block-c" style="text-align:center;">Sample Link Text</div>
</div>
You don't need to use display: table and table-cells to achieve vertical centering, although it is one way.
I find it simpler to set the height and line-height to the same value when dealing with small single line text, like this:
<div class="ui-grid-b" style="width: 100%;border-style: solid;">
<div class="ui-block-a" style="text-align:center;height:60px;line-height:60px;">
<button style="color:#000;background-color:#00b2ee" class="ui-btn ui-shadow ui-corner-all" type="button">Blue Button</button>
</div>
<div class="ui-block-b " style="text-align:center;height:60px;line-height:60px;">Middle Column Text</div>
<div class="ui-block-c" style="text-align:center;height:60px;line-height:60px;">Sample Link Text</div>
</div>
Try this:
<br/><br/>
<div class="ui-grid-b" style="display: table;width: 100%;border-style: solid;">
<div class="" style="text-align:center;">
<button style="color:#000;background-color:#00b2ee" class="ui-btn ui-shadow ui-corner-all" type="button">Blue Button</button>
</div>
<div class="" style="text-align:center;display: table-cell; vertical-align: middle;">Middle Column Text</div>
<div class="" style="display: table-cell;text-align: center;vertical-align: middle;">
Sample Link Text
</div>
</div>
Related
<div style="float: left;">
<img src="image.png"/>
<div style="font-size: 100px;">Health And Wellbeing</div>
</div>
When I run this code, the words appear underneath the picture, is there any way to make the words appear to the right of the text?
I am not sure why your container div has float: left; in its styles, but you can use Flexbox to arrange the contents with more flexibility.
Here's a simple example:
<div style="float: left; display: flex;">
<img src="https://picsum.photos/seed/picsum/200/300" />
<div style="font-size: 100px;">Health And Wellbeing</div>
</div>
Isn't it simple? Just put <img> after the words...
<div style="float: left;">
<div style="font-size: 100px;">
Health And Wellbeing
</div>
<img src="image.png" />
</div>
I'm trying to place icon next to text using span but the images are not flush with the text that is beside them. They are moved up. I'm wondering if anyone knows why it is displayed this way and how to fix it. Thanks you.
<div class="search" id="search">
<input type="search" placeholder="What can we help you find today?"><span>
<img src="search.png" width="20" height="20"></span>
</div>
<div class="customer" id="customer">
<div class="My Account">
<p>My Account<span><img src="user.png" width="23" height="23"></span>
</p>
</div>
<div class="cart">
<span>Cart |</span><span>0</span><span>items</span><span>
<img src="cart.png" width="23" height="auto"></span>
</div>
</div>
Because the default vertical alignment for inline elements is baseline. Set the alignment on your images to middle> Also be sure to remove any white space in your code that would be between those elements as browsers are sensitive to it:
img {
vertical-align: middle;
}
img {
vertical-align: middle;
}
<div class="search" id="search">
<input type="search" placeholder="What can we help you find today?"><span><img src="search.png" width="20" height="20"></span>
</div>
<div class="customer" id="customer">
<div class="My Account">
<p>My Account<span><img src="user.png" width="23" height="23"></span>
</p>
</div>
<div class="cart">
<span>Cart |</span><span>0</span><span>items</span><span><img src="cart.png" width="23" height="auto"></span>
</div>
</div>
I created a simple floating pane declaratively(the below code) . everything is good. I have a button that click on it and the floating pane will open. the problem is that if i again click the button, the floating pane position is change from the previous position . How can i set position of the floating pane. another problem is the top,left and position:absolute is not working for my floating pane .
<body class="claro" role="main">
<div id="bc" style="width:100%; height:100%; padding: 5px;" dojoType="dijit.layout.BorderContainer">
<div id="header" dojoType="dijit.layout.ContentPane" region="top" splitter="true">
</div>
<div dojoType="dojox.layout.ExpandoPane"
splitter="true"
duration="125"
region="left"
previewOnDblClick="true"
id="leftPane"
maxWidth="275"
style="width: 275px;">
<div dojoType="dijit.layout.TabContainer" attachParent="true" tabPosition="bottom" tabStrip="true">
<div dojoType="dijit.layout.ContentPane" title="Legend">
<div id="legendDiv"></div>
</div>
<div dojoType="dijit.layout.AccordionContainer" title="Search" style="width:275px;" attachParent="true">
<div dojoType="dijit.layout.ContentPane" title="Attribute search">
<div class="searchBar">
<p>
<label for="searchBox" style="float: left;">Search:</label>
<input id="searchBox" name="searchBox" style="float: left;">
<span id="runSearchIcon" style="border: none; floast: left; padding: 3px;">
</span>
</p>
</div>
<ul id="dojoList"></ul>
</div>
<div dojoType="dijit.layout.ContentPane" title="spatial search">
<ul id="dijitList"></ul>
</div>
</div>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" region="center" id="centerPane" tabStrip="true">
<div id="mymap" style="width:100%;height:100%"> </div>
<div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"
title="A floating pane" data-dojo-props="resizable:false, dockable:true,closable:false, title:'Tools'"
style="position:absolute;top: 100px;;left:0;width:70px;height:150px;visibility:hidden;">
This is the content of the pane!
</div>
<div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Show me', onClick:function(){dijit.byId('dFloatingPane').show();}" style="position:absolute;top: 150px;left: 20px;"></div>
</div>
</div>
</div>
</body>
Easiest way would be to set the position:absolut with every click on the Button to the first position by using domStyle.
domStyle.set("dFloatingPane",{
position:"absolute",
top:"100px",
left:"0px"
});
Simple solution just create a div and set position relative , position relative control absolute, here is the sample code eg. check and understand
<div style="position:relative">
<div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"
title="A floating pane" data-dojo-props="resizable:false, dockable:true,closable:false, title:'Tools'"
style="position:absolute; top: 100px; left:0; width:70px;height:150px; visibility:hidden;">
This is the content of the pane!
</div>
<div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Show me', onClick:function(){dijit.byId('dFloatingPane').show();}" style="position:absolute;top: 150px;left: 20px;"></div>
</div>
Position:relative Control position:absolute , so you can set your top or bottom position accordign to your dessign thanku, hope you understand my point.
It seems it'd work. I don't know why... My description is too far over.
HTML
<div id="viewPhoto">
<div id="viewThumb">
<img src="$THUMBNAIL_URL$" /><br>
</div>
<div class="moderPanel" style="float:left">
$MODER_PANEL$
</div>
<div id="photo-information" style="float:right"> <strong>Description:</strong></div>
<br />
now I understand.
Try to do this:
<div id="viewPhoto">
<div id="viewThumb" style="float: left">
<img src="http://images.br.sftcdn.net/br/scrn/73000/73753/santos-5.jpg" />
</div>
<div id="photo-information" style="float:left; margin-left: 20px"> <strong>Description:</strong></div>
<div class="moderPanel" style="float:left; border:1px solid green; clear: left">
$MODER_PANEL$
</div>
Because you are putting the div in a float right way.
Try do to left using margin left. Like this:
<div id="photo-information" style="float:left; margin-left: 20px"> <strong>Description:</strong></div>
It's because your float:right CSS statement is causing ithe description to float to the right of your container element. Try using float:left together with a small margin like this:
<div id="viewPhoto">
<div id="viewThumb">
<img src="$THUMBNAIL_URL$" /><br>
</div>
<div class="moderPanel" style="float:left">
$MODER_PANEL$
</div>
<div id="photo-information" style="float:left; margin-left:15px;"> <strong>Description:</strong></div>
<br />
...
attached is an image.
I am trying to get the text format as shown at the right-most end. i.e. within the height of the thumbnail (36px) name, time, date have to be shown vertically aligned. I am having problem showing the text vertically aligned. Here's my code -
<div id="sresults" style="position:absolute;top:120px; left:36%;">
<div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
<div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
<div id="meta0" style="float:right;">
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'></img>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"></img>
<div id='name' style="float:right; font-size:11px">Peter</div>
<div id='time' style="float:right;font-size:11px;">19:23</div>
<div id='date' style="float:right;font-size:11px;">23 Dec'10</div>
</div>
</div>
To be accurate, I want the div ids 'name', 'time', 'date' to be aligned like in the image. how?
Also note that the div with id="0" is one of the results, there'll be 10 such in a page all under <div id="sresults">
Here's what you want: http://www.bravegnuworld.com/rjune/test.html
Notice encapsulating the name, etc in a div that is floated right? You have three divs(block elements, they'll automatically stack). Put those inside another div, and you now have a block element with three stacked blocks inside it. You can either use "float:right" or "display:inline-block" to make the div display on the same level. as the rest of the line.
<div id="sresults" style="position:absolute;top:120px; left:36%; background:yellow">
<div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both; background:red">
<div id="content0" style="float:left; font-size:13px; background:blue">"Hey dude how are you doing?"</div>
<div id="meta0" style="float:right; background:green">
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'></img>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"></img>
<div style="float:right">
<div id='name' style="font-size:11px">Peter</div>
<div id='time' style="font-size:11px;">19:23</div>
<div id='date' style="font-size:11px;">23 Dec'10</div>
</div>
</div>
</div>
You can use table instead of div it's seems more logical to me:
<div id="sresults" style="position:absolute;top:120px; left:36%;">
<div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
<div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
<table id="meta0" style="float:right;">
<tr>
<td>
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'/>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"/>
</td>
<td style="text-align:right;">
<div id='name' style="font-size:11px">Peter</div>
<div id='time' style="font-size:11px;">19:23</div>
<div id='date' style="font-size:11px;">23 Dec'10</div>
</td>
</tr>
</table>
</div>
</div>
UPD
Here is code with divs:
<div id="sresults" style="position:absolute;top:120px; left:36%;">
<div id="id0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
<div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
<div id="meta0" style="float:right;">
<img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts' style="float: left;"/>
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter" style="float: left;"/>
<div style="text-align:right; float:right">
<div id='name' style="font-size:11px">Peter</div>
<div id='time' style="font-size:11px;">19:23</div>
<div id='date' style="font-size:11px;">23 Dec'10</div>
</div>
</div>
</div>
</div>