I am writing a page in HTML and CSS. Inside the page, I have several div tags that I want to center on the page. I have wrapped them all in a div tag with the class infogroup. Then, to my CSS, I added this code: .infogroup{text-align: center;}. It does not center the text in my browser (google chrome), but it does in jsfiddle. I am wondering why I am having this error, and what to do about it. The page has been tested locally and on a server, and has the trouble with both. The page live:
Thank you!
-Ty
HTML
<!DOCTYPE html>
<html>
<head>
<title>bridgeOrTunnel</title>
<link rel="stylesheet" type="text/css" href="bot.css">
</head>
<body>
<header><img src="botlogo.png"></header>
<div class="infogroup">
<div id="line1">
<span class="image"><img src="bri.png"></span>
<span class="image"><img src="tun.png"></span>
</div>
<div id="line2">
<span class="time">9 minutes</span>
<span class="time">13 minutes</span>
</div>
<div id="line3">
<span class="lanes">3 lanes open</span>
<span class="lanes">5 lanes open</span>
</div>
<div id="line4">
<span class="cost">$1.39</span>
<span class="cost">$4.27</span>
</div>
</div>
</body>
you forgot to include this in your bot.css
.infogroup{
text-align: center;
}
Related
I have two boxes set up and i wanted to put some buttons and text in the middle but when ever I try to add text there it makes the far right box go down one. I want them to stay aligned.
I tried adding another between the 2 boxes but this did not work. im new at html so im not sure how to format this.
<!Doctype html>
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="nav_bar">
<ul>
<li>Home</li>
<li>SkillTree</li>
<li>Equipment</li>
<li>Pets</li>
<li>Skills</li>
<li>Quests</li>
</ul>
</div>
<div class="main_container">
<p>
<html>
<head>
<title>HTML div</title>
</head>
<body>
<div style="width: 300px; float:left; border: 15px solid green; height:300px; background:white; margin:10px">
Inventory
<br />
Bronze: <span id="Bronze">0</span>
<br />
Silver: <span id="Bronze">0</span>
<br />
Gold: <span id="Bronze">0</span>
<br />
Diamond: <span id="Bronze">0</span>
</div>
<div style="width: 300px; float:right; border: 15px solid green; height:300px; background:white; margin:10px">
Skills
<br />
Strength: Lv <span id="Strengthlv">1</span> <span id="StrengthCexp">0</span> / <span id="StrengthMexp">100</span>
<br />
Magic: Lv <span id="Magiclv">1</span> <span
id="MagicCexp">0</span> / <span id="MagicMexp">100</span>
<br />
<button onclick="Magicexp()">Click Me!</button>
<br />
</div>
<script type="text/javascript" src="Skills.js"></script>
</body>
</html>
</p>
</div>
</body>
</html>
I expect the buttons / words I want to put in the middle of these 2 boxes to not upset the alignment. But my actual output is words and buttons move the far right box down.
There are multiple ways to approach this problem, just to include a few here in the below code:
You can use bootstrap to implement a grid system, here's the bootstrap grid system reference.
I have included the grid system in your code. To do that, first is to include bootstrap:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
What the grid system does is it breaks the width of your row into 12 equal columns, and in the code below, the left box takes 5 columns and the right box takes 5 columns, and the center where you want to add text and stuff will take 2 columns, totaled 12 columns. To do that we add class="col-sm-5" for 5 columns for example, (you can use col-lg-5 etc. you can look it up for more details, basically this has to do with the Responsiveness of your page).
We can also implement max-width to limit the maximum width of your center div, and use overflow wrap to control the overflow. Look up CSS overflow to see what are your options. One of them is to make a scrolling effect if the elements in the center is too big. That way if it overflows and push the right box to the bottom, you can do a scrolling effect so the right box stays where it is.
In the code below overflow-wrap: break-word; is used if you were to put text in the middle.
You can also utilize the position:absolute; attribute to position your right box in a absolute position, that way it won't be pushed down. See position for reference.
<!Doctype html>
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class="nav_bar">
<ul>
<li>
Home
</li>
<li>
SkillTree
</li>
<li>
Equipment
</li>
<li>
Pets
</li>
<li>
Skills
</li>
<li>
Quests
</li>
</ul>
</div>
<div class="main_container">
<p>
<html>
<head>
<title>HTML div</title>
</head>
<body>
<div class="container">
<div class="row">
<div style="float:left; border: 15px solid green; height:300px; background:white; margin:10px" class="col-sm-5">
Inventory
<br />Bronze:
<span id="Bronze">0</span>
<br />Silver:
<span id="Bronze">0</span>
<br />Gold:
<span id="Bronze">0</span>
<br />Diamond:
<span id="Bronze">0</span>
</div>
<div style="max-width: 30px; overflow-wrap: break-word;" class="col-sm-2">
<h1>lkjdlfkjdlkfjdljfdlkjfdlkjfd</h1>
</div>
<div style="width: 300px; float:right; border: 15px solid green; height:300px; background:white; margin:10px;" class="col-sm-5">
Skills
<br />Strength: Lv
<span id="Strengthlv">1</span>
<span id="StrengthCexp">0</span> /
<span id="StrengthMexp">100</span>
<br />Magic: Lv
<span id="Magiclv">1</span>
<span
id="MagicCexp">0</span> /
<span id="MagicMexp">100</span>
<br />
<button onclick="Magicexp()">Click Me!</button>
<br />
</div>
</div>
</div>
<script type="text/javascript" src="Skills.js"></script>
</body>
</html>
</p>
</div>
</body>
</html>
I added a flexbox to your code. I hope this was helpful.
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
<style>
.flex-container {
display: flex;
align-items: stretch;
}
.flex-container>div {
width: 600px; /*change the max columb width*/
background-color: #f1f1f1;
border: 15px solid green;
background:white;
margin: 10px;
text-align: center;
font-size: 15px;
}
</style>
</head>
<body>
<div class="main_container">
<div class="flex-container">
<div style="order: 1">
<p><b>Inventory</b></p>
<p>Bronze: <span id="Bronze">0</span></p>
<p>Silver: <span id="Bronze">0</span></p>
<p>Gold: <span id="Bronze">0</span></p>
<p>Diamond: <span id="Bronze">0</span></p>
</div>
<div style="order: 3">
<p><b>Skills</b></p>
<p>Strength: Lv <span id="Strengthlv">1</span> <span id="StrengthCexp">0</span> / <span id="StrengthMexp">100</span><p/>
<p>Magic: Lv <span id="Magiclv">1</span> <span
id="MagicCexp">0</span> / <span id="MagicMexp">100</span></p>
<button onclick="Magicexp()">Click Me!</button>
</div>
<div style="order: 2">
<h1>content</h1>
</div>
<!-- You can add more div's here, if you want -->
</div>
</div>
</body>
</html>
If you have any questions, go ahead!
The divs are stacking and taking up 100% width and others are being ignored entirely (namely the main wrapper which makes the entire page width="960px" is being completely ignored).
How the page looks when opened in Chrome
How the image looks like hosted at uhostfull.com
As you can see my games section (admins choice) has jumped into the advert space despite each section sitting inside a div class .container.
.container {
position: static;
float: left;
width: 100%;
display: flex;
justify-content: center;
}
Another thing that is occurring is that the main div I have used to manage the page div id #page-wrap is not doing its job:
#page-wrap {
width: 960px;
margin: 0 auto;
}
I should also mention that any divs that I create and test in chrome work (say if I make a few white boxes for example) but they will not show up when I host!
My main concern is somehow stopping the advert space automatically adopting the games section as a parent div without being nested.
Here is the code:
<!DOCTYPE html>
<head>
<link type="text/css" rel="stylesheet" href="playpar.css">
<script type="text/javascript" src ="playpar.js" async></script>
<title>Website name
</title>
<title>
Curveball Adrenaline Challenge Bubble Trouble
</title>
</head>
<body>
<div id="page-wrap">
<div id="header">
<div id="sitelogo"><img src="http://i44.photobucket.com/albums/f50/giansonn/Logo%20bling_zpsikvjtrrl.jpg"/></a></div>
<div id="sitebold"><img src="http://i44.photobucket.com/albums/f50/giansonn/Screen%20Shot%202017-05-09%20at%2022.45.36_zpsx5p40xx4.png"/></a></div>
</div>
<div class="container">
<div id="advertspace"><img src="http://i44.photobucket.com/albums/f50/giansonn/whitetile_zpswxxr0bja.png" class="filler"><p class="getme">Advertise here</p></div>
</div>
<div class="container">
<fieldset>
<legend>Administrator's Picks</legend>
<table>
<tr>
<td>
<div class="games">
<a href="/curveballthegame"><img src="http://i44.photobucket.com/albums/f50/giansonn/Curveball%20image_zpscalom4mw.png" class="games"/>
<div class="overlay">
<div class="text"><span>Curve Ball</span></div></div></div>
</td>
<td>
<div class="games">
<a href="/adrenalinechallenge"><img src="http://i44.photobucket.com/albums/f50/giansonn/Adrenaline%20challenge%20image_zpsyinfiyue.jpg" class="games"/>
<div class="overlay">
<div class="text"><span>Adrenaline Challenge</span></div></div></div>
</td>
<td>
<div class="games">
<a href="/bubbletrouble"><img src="http://i44.photobucket.com/albums/f50/giansonn/Bubble%20trouble%20image_zpsy3mnffrg.png" class="games"/>
<div class="overlay">
<div class="text"><span>Bubble Trouble</span></div></div></div>
</td>
</tr>
</table>
</fieldset>
</div>
<div id="footnavbox">Home | Image Board | Contact us</div>
</div>
</body>
I think all these issues are related, help is appreciated.
I am trying to place a label/name next to an avatar in a list of items. I am using Ionic v1.
Here's my file:
<!DOCTYPE html>
<html>
<head>
<link data-require="ionic#*" data-semver="1.3.1" rel="stylesheet" href="https://code.ionicframework.com/1.3.1/css/ionic.min.css" />
<script data-require="ionic#*" data-semver="1.3.1" src="https://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script>
<script data-require="angular.js#1.5.7" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="list">
<div class="item item-avatar-left item-icon-right">
<img src="venkman.jpg">
<h2>Hello</h2>
<i class="icon ion-ios-telephone"></i>
</div>
<div class="item item-icon-left item-icon-right">
<i class="icon ion-star"></i>
<h2>Hello</h2>
<i class="icon ion-ios-telephone"></i>
</div>
<div class="item item-icon-left item-icon-right">
<i class="icon ion-star"></i>
<h2>Hello</h2>
<p>hi</p>
<i class="icon ion-ios-telephone"></i>
</div>
<div class="item item-avatar-left item-icon-right">
<img style="height: 15px" src="venkman.jpg">
<h2>Hello</h2>
<p>hi</p>
<i class="icon ion-ios-telephone"></i>
</div>
</div>
I've also got it on plunkr: http://plnkr.co/edit/g3HI56XFZmZwxAGlUcBj?p=preview
If I use an icon then the formatting works great and the text is vertically-aligned next to the icon but for some reason when I use an avatar, the text is always at the vertically always at the top.
How do I vertically align things in the middle with ionic? Should I use flexbox for this?
I noticed that it doesn't automatically align the image in the center if it's a short image as well.
I know it is an old post, but I arrived here searching how to do something similar, so maybe it could help someone in the future.
A easy way to do that is using a table:
<table style="width:100%">
<tr>
<td><img src="venkman.jpg"></td>
<td><h2>Hello</h2></td>
<td><i class="icon ion-ios-telephone"></i></td>
</tr>
</table>
Then with css you can custom the width for each cell to achieve the formatting that you are looking for.
I have a center div and a simple problem...
I don't know how to place a image right to it relative(!) like this:
<div class="text_middle">
<span class="volat_text">App</span>
<div id="sport_dropdown">
<span id="sport">Test</span>
</div>
</div>
<img id="arrow_down" src="img/arrow_down.png">
Here is the code: http://codepen.io/lalaluki/pen/pNNYpZ
Does somebody knows a trick?
You can place something like <span>▾</span> inside your .text_middle element. I used the html symbol code for a downside triangle because you did not provide the image in your pen example. But you can try it with an image or glyphicon instead.
<div class="text_middle">
<span class="volat_text">App</span>
<div id="sport_dropdown">
<span id="sport">Test</span>
</div>
<span>▾</span>
</div>
See the pen here
.vertical_align{
vertical-align:middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="top_bar">
<div class="text_middle">
<span class="volat_text">App</span>
<div id="sport_dropdown">
<span id="sport">Test</span>
<span class="glyphicon glyphicon-chevron-down vertical_align" ></span>
</div>
</div>
Try this.
Hope this helps.
I would apply float:right to the image:
#arrow_down {
float:right;
}
Need to change your HTML Structure to achieve this quickly. Add image inside '.text-middle' div
<div class="text_middle">
<span class="volat_text">App</span>
<div id="sport_dropdown">
<span id="sport">Test</span>
</div>
<img id="arrow_down" src="img/arrow_down.png">
</div>
Add vertical align middle to your image
#arrow_down {
vertical-align: middle;}
Hope this will help you
I want to align 'Header' label with the others span labels on the same work. I tried display: inline-block but it didn't work. How can i make it? Thanks.
<div class="panel panel-default">
<div class="panel-heading">
Title
</div>
<div class="panel-body">
<div class="row" >
<div class="col-sm-3">
<label>Header</label>
</div>
<div class="col-sm-9">
<h4><span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span></h4>
</div>
</div>
</div>
</div>
http://plnkr.co/edit/uct0S6PDIXpNbDCd1p1K?p=preview
Cut the header label from col-sm-3 div and paste in col-sm-9 with other span label. Then all will align in same order.
use below css.
.logo-head {
line-height: 39px;
margin: 0 !important;
}
add class to label
<label class="logo-head">Header</label>
Add this piece of CSS with your code it works fine
.col-sm-3 { display: table; float:left; height:40px;}
.col-sm-9 { display: table; float:left; }
.col-sm-3 > label , h4 > span { display: table-cell; vertical-align: middle; }
Demo
It seems you are using Bootstrap, then make sure you are not overriding bootstrap.css or bootstrap.min.css, for reference working code is given below, in case if you are looking for Mobile Browsers, you need to edit the Standard Bootstrap CSS file bootstrap.css or add the following line to your HTML code inside head(style) tags, Working example given below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"/>
<style>
.row
{
display:flex;
}
}
</style>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
Title
</div>
<div class="panel-body">
<div class="row" style="dispay: block;" >
<div class="col-sm-3">
<label style="padding-top:10px;">Header</label>
</div>
<div class="col-sm-9">
<h4><span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span></h4>
</div>
</div>
</div>
</div>
</body>
</html>
Like this? http://plnkr.co/edit/q2hxlWnTP9BLSnhIKd6M?p=preview
Since I couldn't edit your CSS file, I added the following inline CSS:
<div class="col-sm-3" style="float:left ; padding-top:12px">
Cheers!
Cynthia