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.
Related
Forgive my simple questions but im rather new to coding and im having trouble making my columns side by side, i was able to link images and external websites the way i wanted to but now have no idea how to get these two to be side by side. hopefully soon enough ill actually take the time and finally learn HTML but for now, im just shooting from the hip!
<div align="center">
<div style="width: 25%;">
<div class="section group">
<div class="col-sm- span_1_of_2">
<div class="container">
<img src="https://lirp-cdn.multiscreensite.com/71976d90/dms3rep/multi/opt/content-reviews-thumbsup-1920w.jpg" alt="Thumbs Up Reviews CTA" style="border: none;"/>
</div>
</div>
<div class="col-sm- span_1_of_2">
<div class="container2">
<img src="https://lirp-cdn.multiscreensite.com/71976d90/dms3rep/multi/opt/content-reviews-thumbsdown-1920w.jpg" alt="Thumbs Up Reviews CTA" style="border: none;"/>
</div>
</div>
</div> <!-- end width 25% div -->
</div> <!-- end master centering div -->
<br /><br />
</div>
The code you have provided is rather confusing. If I understand your question, you are trying to place the two images next to each other. Since you are using bootstrap, I would suggest:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<img src="https://lirp-cdn.multiscreensite.com/71976d90/dms3rep/multi/opt/content-reviews-thumbsup-1920w.jpg" alt="Thumbs Up Reviews CTA" style="border: none;" />
</div>
<div class="col-sm-6">
<img src="https://lirp-cdn.multiscreensite.com/71976d90/dms3rep/multi/opt/content-reviews-thumbsdown-1920w.jpg" alt="Thumbs Up Reviews CTA" style="border: none;" />
</div>
</div>
</div>
This is what I would do in your situation. I do not understand the code you have provided though, but this should work.
The row class in bootstrap, when added to a div, should cause it to cover the entire width of the screen. It's working in most divs but seems to fail in some cases. Can someone point out my errors? I've tried reading the documentation. What have I missed?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>My Clock App</title>
<script src="knockout-3.2.0.min.js"></script>
<script src="jQuery.js"></script>
<script defer src="main.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="openBar" class="row">
<span id="openButton" data-bind="click: openNav">☰ open</span>
</div>
<div class="row">
<h1>My World Clock</h1>
</div>
<br>
<div data-bind="foreach: countries">
<div class="row throw">
<--adding row instead of col-md-12 causes issues-->
<div class="col-md-12">
<h3>Pikachu</h3>
</div>
<div class="col-md-2">
<h3 data-bind="text: name"></h3>
</div>
<div class="col-md-2">
<h5 data-bind="text: day"></h5>
<p data-bind="text: date"></p>
<p data-bind="text: time"></p>
</div>
<div class="col-md-2">
<h5 data-bind="text: capital"></h5>
<p data-bind="text: currency"></p>
<p data-bind="text: coor"></p>
</div>
<div class="col-md-2 languages" data-bind="foreach: lang">
<p data-bind="text: name"></p>
</div>
<div class="col-md-2 altName" data-bind="foreach: alts">
<p data-bind="text: $data"></p>
</div>
<div class="col-md-2 flag">
<img data-bind="attr:{src: imgSrc}">
</div>
</div>
</div>
</div>
</body>
</html>
It sounds like you're trying to nest a .row within a .row. .row elements have a negative left and right margin that matches the left and right padding of .col- elements. .col- elements should be the child elements of a .row. This allows the outside edge of the columns gutter to line up as expected.
Since you are attempting to .row you're going to have a total of -30px for the left and right margins, pulling your content to the outsides further than wanted.
Demo of double nested .row.
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
<div class="row">
<div class="col-md-12">12 Columns</div>
</div>
<div class="row">
<div class="row">Row Row</div>
</div>
Notice that the second row should show Row Row, but it doesn't. The left negative margin pulls the first Row outside of the viewports view.
Since .row isn't simply a descriptive feature and applies styling with real consequences I suggest removing the class from the DIV.
This is the image that im trying to center, ive tryed different ways to do this but to no success i think its to do with bootstrap pre determining the position and if so i dont know how to disable it can anyone help me with this issue many thanks.
<div class="container">
<div class="row">
<div class="col-md-5">
<!-- <img src="../images/4uSupportLogo.png" class="" height="250px"/> -->
<br> </br>
<!-- <img src="../images/4uSupportLogo.png" alt="Logo" align="top" width="300" height="200" </br> -->
<!-- <img src="../images/4uSupportLogo.png" width="300" height="200" style="display:block; margin-left:auto;
margin-right: auto;" align="center" /> -->
<center> <img src="../images/4uSupportLogo.png" class="img-responsive" width="300" height="200"> </center>
<br> </br>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class=" col-md-12 well text-center">
<h4><i><strong>The Username or Password is incorrect please try again.</strong></i></h4>
<p>
If you have forgot your password and would like to reset it please contact Jack </p>
<input type="button"
value="Request New Password"
onclick="location='../forgot_password/forgot.php'" />
</div>
</div>
</div>
It looks like that the row is just positioning the image wrongly.. <center><img></center> should work fine.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<center><img src="https://media.giphy.com/media/l0HlSYVgZLQ1Y4GdO/giphy.gif" class="img-responsive" alt="Cinque Terre" width="304" height="236"></center><br><br>
<img src="https://media.giphy.com/media/l0HlSYVgZLQ1Y4GdO/giphy.gif" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
Source
The img-responsive isn't doing anything to fix it left. Content flows left to right normally, so it's positioned normally. You can center it by adding text-align: center; on its parent element or by adding some rules directly to the image. This is better done on a class, but here's an example:
img {
display: block;
margin: 0 auto;
}
http://codepen.io/paulcredmond/pen/RGOKwr
I am centering an image using bootstrap's center-block class.
<section class="container">
<a href="www.apple.com">
<img class="center-block" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</section>
The only problem is that the links spans the width of the container. How do I restrict the URL to the image?
Working JSFIDDLE
You have to add a container for your image and link to sit inside besides just a section tag. In This way you don't have to modify the container class and you introduce a div to organize and style as you wish. Here is the working code:
<section class="container">
<div style="width:150px;margin-left:auto;margin-right:auto;">
<a class="center-block"href="www.apple.com">
<img class="center-block" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</div>
</section>
Try wrapping another element around your <a> and <img> tags and explicitly centering it via text-align: center; or Bootstrap's text-center class :
<section class="container">
<!-- You can use Bootstrap's text-center class a style="text-align: center;" here -->
<div class='center-block text-center'>
<a href="www.apple.com">
<img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</div>
</section>
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Centered Apple Logo</title>
</head>
<body>
<section class="container">
<div class='center-block text-center'>
<a href="www.apple.com">
<img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;" />
</a>
</div>
</section>
</body>
</html>
The link is an inline element so just use text-center on the container instead..
<section class="container text-center">
<a href="//www.apple.com">
<img class="center-block" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201605191653" width="150px;" height="100px;"/>
</a>
</section>
http://codeply.com/go/bLOmNY1pQZ
If you're referring to the link, as in hovering over any section of the .container will activate the link, rather than just the image, here's the solution:
.container {
text-align: center;
}
.container a {
display: inline-block;
}
This basically gives the link its own dimensions, so it doesn't stretch to fill the parent.
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;
}