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>
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>
I don't know why, but width of my table on very small sizes is going over the background on the right ( outside the screen of the phone ) . On 412 px it works, but on 320 px don't want to be nice and my table go outside screen and everything is cut.
.ania-center {
margin: auto;
width: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">Rejestracja on-line
<strong>bez kolejek!</strong>
</h2>
<hr>
<h2 class="text-center">Lista lekarzy</h2>
<br/>
<table class="table table-responsive table-striped ania-center">
<tr>
<th>Imie i nazwisko</th>
<th>Gabinet</th>
<th>Telefon</th>
<th>Rejestracja on-line</th>
</tr>
#foreach($doctors as $doctor)
<tr>
<td>
{{$doctor['imie']}} {{$doctor['nazwisko']}}
</td>
<td>
{{$doctor['gabinet']}}
</td>
<td>
{{$doctor['telefon']}}
</td>
<td>
umów wizyte
</td>
</tr>
#endforeach
</table>
</div>
</div>
</div>
You need to wrap the table inside a div and give it a class .table-responsive
This class doesn't work directly on the table.
See result below:
.ania-center {
margin: auto;
width: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">Rejestracja on-line
<strong>bez kolejek!</strong>
</h2>
<hr>
<h2 class="text-center">Lista lekarzy</h2>
<br/>
<div class="table-responsive">
<table class="table table-striped ania-center">
<tr>
<th>Imie i nazwisko</th>
<th>Gabinet</th>
<th>Telefon</th>
<th>Rejestracja on-line</th>
</tr>
#foreach($doctors as $doctor)
<tr>
<td>
{{$doctor['imie']}} {{$doctor['nazwisko']}}
</td>
<td>
{{$doctor['gabinet']}}
</td>
<td>
{{$doctor['telefon']}}
</td>
<td>
umów wizyte
</td>
</tr>
#endforeach
</table>
</div>
</div>
</div>
</div>
I'm trying to create a complex layout using table in twitter-bootstrap. However, I'm not able to get it perfectly right! Particularly, where 5 is displayed!
Is it possible to achieve the same using div's instead? How would I get the borders in that case?
Please check the design attached.
<div class="container">
<table class="table table-bordered" style="width:80%">
<tr>
<td class="col-md-6" colspan="4"><strong>1</strong></td>
<td class="col-md-4" rowspan="3"><img src="#" /></td>
<td class="col-md-2" rowspan="3"><button class="del-icon">X</button></td>
</tr>
<tr>
<td class="col-md-3"><strong>2</strong></td>
<td class="col-md-3"><strong>3</strong></td>
</tr>
<tr>
<td><strong>4</strong></td>
<td><strong>5</strong></td>
</tr>
</table>
</div>
Yes it is possible, you just add row to 2,3 then another row for 4,5
<div class="row">
<div class="col-md-6 blue1">
1
<div class="row">
<div class="col-md-6 blue2">2</div>
<div class="col-md-6 blue3">3</div>
</div>
<div class="row">
<div class="col-md-2 blue4">4</div>
<div class="col-md-10 blue5">5</div>
</div>
</div>
<div class="col-md-4 blue6">
img
</div>
<div class="col-md-2 blue7">
x
</div>
Bootply: http://www.bootply.com/mraM3WKCvt
Hope that helps, cheerio!
There is a gap between elements of an input group, if put into a table.
<link href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<p>This is fine</p>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<div class="input-group-addon">a</div>
<div class="input-group-addon">b</div>
</div>
</div>
</div>
<table>
<tr>
<td>There is a gap between spans in tables</td>
</tr>
<tr>
<td>
<div class="input-group">
<div class="input-group-addon">a</div>
<div class="input-group-addon">b</div>
</div>
</td>
</tr>
</table>
How can I get rid of this gap?
You could try removing the border-spacing added by the table. Alternatively, you can set the border-collapse to collapse if you prefer the way that looks.
border-spacing is inherited by default in CSS by child elements. input-group is set to display: table which means it inherits the borders-spacing: 2px from the parent table. This means it will be applied to input-group-addons since they are being displayed as table cells.
table .input-group {
border-spacing: 0;
}
<link href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<p>This is fine</p>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<div class="input-group-addon">a</div>
<div class="input-group-addon">b</div>
</div>
</div>
</div>
<table>
<tr>
<td>Previously a gap between elements</td>
</tr>
<tr>
<td>
<div class="input-group">
<div class="input-group-addon">a</div>
<div class="input-group-addon">b</div>
</div>
</td>
</tr>
</table>
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>