I know that's been asked many times and I am trying to compile the answers but cannot come up with something that would work for me. Here is my code:
<div style="position:relative; overflow:hidden; height:35px">
<table style="width:100%; height:100%;">
<tr>
<td style="vertical-align:middle;">
<div style="float:left">
<img src="image1.png">
<img src="image2.png">
</div>
<div style="float:right;height:30px" class="panel panel-default">
<img src="image3.png">
</div>
<div style="float:right;width:250px;height:30px" class="panel panel-default"></div>
</td>
</tr>
</table>
</div>
Demo
What I want is to have all inner divs aligned vertically in the middle.
Can someone please help?
Thanks
You should use inline-block
<style>
.my_div {position:relative; overflow:hidden; height:35px;}
.my_div table {width:100%; height:100%;}
.my_td div {display: inline-block; vertical-align:middle;}
</style>
<div class="my_div">
<table>
<tr>
<td class="my_td">
<div>
<img src="image1.png">
<img src="image2.png">
</div>
<div class="panel panel-default">
<img src="image3.png">
</div>
<div class="panel panel-default"></div>
</td>
</tr>
</table>
</div>
Related
I've got the following structure:
.pinyined-char {
display: inline-block;
}
.unpinyined-char {
display: inline-block;
}
.pinyin {
font-size: 10 px;
text-align: center;
}
.char {
text-align: center;
}
<div class="pinyined-char">
<div class="pinyin">duō</div>
<div class="char">多</div>
</div>
<div class="unpinyined-char">
<div class="pinyin"></div>
<div class="char">，</div>
</div>
<div class="pinyined-char">
<div class="pinyin">qǐng</div>
<div class="char">請</div>
</div>
<div class="pinyined-char">
<div class="pinyin">fǎng wèn</div>
<div class="char">訪問</div>
</div>
<div class="unpinyined-char">
<div class="pinyin"></div>
<div class="char">http://www.Caringo.com 。
</div>
</div>
<div class="pinyined-char">
<div class="pinyin">àn zhào</div>
<div class="char">按照</div>
</div>
<div class="unpinyined-char">
<div class="pinyin"></div>
<div class="char">Caringo LinkedIn： https ： //www.linkedin.com/company/caringo-inc- Twitter： https ： //twitter.com/CaringoStorage
</div>
</div>
<div class="pinyined-char">
<div class="pinyin">guān yú</div>
<div class="char">關於</div>
</div>
<div class="unpinyined-char">
<div class="pinyin"></div>
<div class="char">Caringo Caringo</div>
</div>
<div class="pinyined-char">
<div class="pinyin">shè bèi</div>
<div class="char">設備</div>
</div>
<div class="pinyined-char">
<div class="pinyin">hé</div>
<div class="char">咊</div>
</div>
<div class="unpinyined-char">
<div class="pinyin"></div>
<div class="char">Caringo LinkedIn</div>
</div>
</div>
Ultimately, I want all of the .pinyined-char and .unpinyined-char .char divs to line up next to each other, with the .pinyin divs on top
I can sorta get this working by putting display: inline-block on .pinyined-char and .unpinyined-char, but I find that it doesn't wrap well
How do I make this wrap properly and put everything inline, while keeping pinyin on top of the respective characters in .char?
Example:
NOTE: I have edited the example to be much closer to what I am experiencing. The problem I am trying to solve is between the
àn zhào
按 照
line and the Caringo Linkedin. I would like that Caringo Linkedin to appear on the same line and wrap.
https://jsfiddle.net/70kbtLru/11/
This is specifically what the HTML5 <ruby> element was introduced for. In a <ruby> element you can add ruby annotations with the <rt> tag, while using <rp> for backwards compatibility.
Something like
duō
多
can be rendered by this code:
<ruby>
多 <rp>(</rp><rt>duō</rt><rp>)</rp>
</ruby>
Browsers that don’t support <ruby> will render it like this, depending on the choice of <rp> parentheses:
多 (duō)
Taking your current example of annotated text, the HTML would look something like this:
<ruby>
多 <rp>(</rp><rt>duō</rt><rp>)</rp>
</ruby>
，
<ruby>
請 <rp>(</rp><rt>qǐng</rt><rp>)</rp>
訪 <rp>(</rp><rt>fǎng</rt><rp>)</rp>
問 <rp>(</rp><rt>wèn</rt><rp>)</rp>
</ruby>
https://www.Caringo.com 。
<ruby>
按 <rp>(</rp><rt>àn</rt><rp>)</rp>
照 <rp>(</rp><rt>zhào</rt><rp>)</rp>
</ruby>
Caringo LinkedIn： https://www.linkedin.com/company/caringo-inc- Twitter： https://twitter.com/CaringoStorage
<ruby>
關 <rp>(</rp><rt>guān</rt><rp>)</rp>
於 <rp>(</rp><rt>yú</rt><rp>)</rp>
</ruby>
Caringo Caringo
<ruby>
設 <rp>(</rp><rt>shè</rt><rp>)</rp>
備 <rp>(</rp><rt>bèi</rt><rp>)</rp>
咊 <rp>(</rp><rt>hé</rt><rp>)</rp>
</ruby>
Caringo LinkedIn
How about this?
.pinyined-char, .unpinyined-char {
display: inline-block;
}
.pinyin {
font-size: 10px;
}
.char, .pinyin {
text-align: center;
width: 100%
}
<div>
<div class="pinyined-char">
<div class="pinyin">shè bèi</div>
<div class="char">設備</div>
</div>
<div class="pinyined-char">
<div class="pinyin">hé</div>
<div class="char">咊</div>
</div>
<div class="unpinyined-char">
<div class="pinyin"></div>
<div class="char">Caringo LinkedIn</div>
</div>
</div>
<div>
<div class="pinyined-char">
<div class="pinyin">shè bèi</div>
<div class="char">設備</div>
</div>
<div class="pinyined-char">
<div class="pinyin">hé</div>
<div class="char">咊</div>
</div>
<div class="unpinyined-char">
<div class="pinyin"></div>
<div class="char">Caringo LinkedIn</div>
</div>
</div>
Otherwise, here it is with a table.. and each word vertically aligned to each character.
<table>
<tr>
<td>shè</td>
<td>bèi</td>
<td>hé</td>
<td></td>
</tr>
<tr>
<td>設</td>
<td>備</td>
<td>咊</td>
<td>Caringo LinkedIn</td>
</tr>
<tr>
<td>shè</td>
<td>bèi</td>
<td>hé</td>
<td></td>
</tr>
<tr>
<td>設</td>
<td>備</td>
<td>咊</td>
<td>Caringo LinkedIn</td>
</tr>
</table>
This here was with the code exactly like you showed (ie, two different sets of texts / with matching translations)
This snippet can easily be extended to add more text in the table, if needed
#wrapper {
display: flex;
flex-wrap: wrap;
}
td {
text-align: center;
}
.char,span {
text-align: center;
align-self: flex-end;
padding-bottom: .3em;
padding-left: .5em;
}
<div id="wrapper">
<table>
<tr>
<td>duō</td>
</tr>
<tr>
<td>多</td>
</tr>
</table>
<span>,</span>
<table>
<tr>
<td>qǐng</td>
<td>fǎng wèn</td>
</tr>
<tr>
<td>請</td>
<td>訪問</td>
</tr>
</table>
<div class="char">
http://www.Caringo.com
</div>
<table>
<tr>
<td>àn zhào</td>
</tr>
<tr>
<td>按照</td>
</tr>
</table>
<div class="char">
Caringo LinkedIn
Twitter
</div>
<table>
<tr>
<td>guān yú</td>
</tr>
<tr>
<td>關於</td>
</tr>
</table>
<div class="char">Caringo Caringo</div>
<table>
<tr>
<td>shè bèi</td>
<td>hé</td>
</tr>
<tr>
<td>設備</td>
<td>咊</td>
</tr>
</table>
<div class="char">Caringo LinkedIn</div>
</div>
How can I align img in center to the respective to the text below it? The wrapper div is aligned left.
<div class="wrapper">
<div class="com-icon">
<img src="images/IT.png" alt="laptop logo">
</div>
<div class="com-text">
<p>IT Solutions</p>
</div>
</div>
Add another wrapper around the com-icon and com-text. And then align that were you want it. Example below:
<div class="wrapper">
<div class="wrapper-inner">
<div class="com-icon">
<img src="images/IT.png" alt="laptop logo">
</div>
<div class="com-text">
<p>IT Solutions</p>
</div>
</div>
</div>
Add this to your css file:
.wrapper{
text-align: center;
}
or if you just want to check if it's working you can add the infamous inline style.
This not a recommended method other than just to see if it's OK!
<div class="wrapper" style="text-align:center;">
<div class="com-icon">
<img src="images/IT.png" alt="laptop logo">
</div>
<div class="com-text">
<p>IT Solutions</p>
</div>
</div>
make a table
table.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.com-text,
.com-icon {
margin: auto;
}
<div class="wrraper">
<table class="center">
<tr>
<td>
<div class="com-icon">
<img src="image.jpg" alt="laptop logo">
</div>
</td>
</tr>
<tr>
<td>
<div class="com-text">
<p>IT Solutions</p>
</div>
</td>
</tr>
</table>
</div>
I'am trying to center this:
[![enter image description here][1]][1]
Here is the HTML:
<section class="page-section parallax directions" id="location" style="padding-top:10%">
<div class="container div-table">
<div class="parallax-bg" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="-150"></div>
<div class="parallax-overlay"></div>
<div class="parallax-inner text-center">
<?php
session_start();
if(isset($_SESSION['playername']))
{
?>
<div class="panel panel-warning" style="padding-left:10px;padding-right:10px">
<h3 class='panel-header panel shadow text-center'><?php echo $_SESSION['playername'] ?> UCP</h3>
<div class="panel panel-body">
<table>
<tr>
<td class="text-center">
<h4>My Signature</h4>
</td>
</tr>
<tr>
<td class="text-center">
<h4>My Profile</h4>
</td>
</tr>
<tr>
<td class="text-center">
<h4>Change My Password</h4>
</td>
</tr>
<tr>
<td class="text-center">
<h4>Logout</h4>
</td>
</tr>
</table>
</div>
</div>
<?php
}
else
{
header("location:index.php");
}
?>
</div>
</section>
I'm using bootstrap btw if is thats the matter.
EDIT: i have edited the code above completely which i hasnt shown fully.
try padding-left:auto; and padding-right:auto; instead, 10px is not a lot
Regards
Rachel
How about some simple CSS...
<div class="panel panel-body" style="width:150px;margin:auto;border:1px solid black;">
I put the border on so you could see it better to adjust the width as you need. You can use a percentage in the width also.
create an id for your table, something like mytable and style it like so:
#mytable {
margin-left: auto;
margin-right: auto;
}
Here's the jsfiddle.
use margin:auto on your table
.centerTable {
margin: auto;
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="page-section parallax directions" id="location" style="padding-top:10%">
<div class="container div-table">
<div class="parallax-bg" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="-150"></div>
<div class="parallax-overlay"></div>
<div class="parallax-inner text-center">
<div class="panel panel-warning" style="padding-left:10px;padding-right:10px">
<h3 class='panel-header panel shadow text-center'>UCP</h3>
<div class="panel panel-body">
<table class="centerTable">
<tr><td class="text-center"><h4>My Signature</h4></td></tr>
<tr><td class="text-center"><h4>My Profile</h4></td></tr>
<tr><td class="text-center"><h4>Change My Password</h4></td></tr>
<tr><td class="text-center"><h4>Logout</h4></td></tr>
</table>
</div>
</div>
</div>
</div>
</section>
Are you looking for something like this? https://jsfiddle.net/99x50s2s/100/
Use the bootstrap's "text-center" class and also add "table" class to the HTML table.
<div class="panel panel-warning" style="padding-left:10px;padding-right:10px">
<h3 class='panel-header panel shadow text-center'><?php echo $_SESSION['playername'] ?> UCP</h3>
<div class="panel panel-body">
<table class="table">
<tr><td class="text-center"><h4>My Signature</h4></td></tr>
<tr><td class="text-center"><h4>My Profile</h4></td></tr>
<tr><td class="text-center"><h4>Change My Password</h4></td></tr>
<tr><td class="text-center"><h4>Logout</h4></td></tr>
</table>
</div>
</div>
I'm trying to add a new div area right above the content section of blogger-dynamic-magazine view like shown in the picture. How can I put a three-div area (like shown in the picture) with red color?
I've tried to insert a <div> right after the <body> tag and before the <content> tag, but it doesn't work.
I've put even below code but doesn't worked.
<div id="container" style="background:black; position:relative; clear:left; top:100px; width:100px; height:100px;">
<table>
<tr>
<td> <div style="background:black;"> Content for div #1</div> </td>
<td> <div style="background:black;"> Content for div #2</div> </td>
<td> <div style="background:black;"> Content for div #3</div> </td>
</tr>
</table>
EDIT:
In my blogger code, I've
</head>
<body>
<div class='content'>
<div class='content-outer'>
<div class='fauxborder-left content-fauxborder-left'>
<div class='content-inner'>
<div class='main-outer'>
<div class='fauxborder-left main-fauxborder-left'>
<div class='region-inner main-inner'>
<div class='columns fauxcolumns'>
<div class='column-center-outer'>
<div class='column-center-inner'>
<b:section class='main' id='main' showaddelement='no'>
Use a table:
<div id="container">
<table>
<tr>
<td> <div> Content for div #1</div> </td>
<td> <div> Content for div #2</div> </td>
<td> <div> Content for div #3</div> </td>
</tr>
</table>
</div>
CSS for explanatory purposes only.
table tr td div {
background:red;
}
You can use this code:
<<<<<<<<<<<<<< CSS >>>>>>>>>>>>>
<style>
#container {width:100%; margin:0px; padding:0px;}
.inner-container {max-width:1140px; width:100%;margin:0 auto;}
.red {display:inline-block; width:30%; margin:1%;}
</style>
<<<<<<<<<<<< HTML >>>>>>>>>>>>>
<div id="container">
<div class="inner-container">
<div class="red red-1"> Content for div #1</div>
<div class="red red-2"> Content for div #2</div>
<div class="red red-3"> Content for div #3</div>
</div>
</div>
Dynamic Blogger seems to remove any custom html from the template. The only way to do this is to dynamically insert the html using JavaScript and something like jQuery, e.g.
var divstr = "Some content";
$(divstr).insertAfter(".article-header");
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>