<ion-view view-title="个人信息">
<ion-content>
<style>
.user-detail-item {
position: relative;
height: 80px;
}
.user-detail-left {
position: absolute;
border: 1px dashed red;
top: 0;
bottom: 0;
height: 80px;
margin: auto;
}
.user-detail-avatar {
position: absolute;
height: 64px;
width: 64px;
right: 16px;
top: 0px;
bottom: 0px;
margin: auto;
}
</style>
<div class="list">
<a class="item user-detail-item" href="#">
<span class="user-detail-left">头像</span>
<img class="user-detail-avatar" src="img/wechat.png"></img>
</a>
<a class="item" href="#">
<span>昵称</span>
<span>xxx</span>
</a>
<a class="item" href="#">
<span>帐号</span>
<span>xxx</span>
</a>
</div>
</ion-content>
my code like this, whatever how I try, it still align the top, my question is how to make the text align middle.
so, I want the text and image align mid, and the text left, image right.
Use line-height trick. If you are sure, the text will fit on just one line.
There are generally two possibilities - line-height and padding-top. The padding can affect the dimensions of the bar, but line-height should not, but it works, when you have single-line text / title.
I am not sure if vertical align will work for inline element of text.
I suggest you this code
style="vertical-align:middle"
Related
I'm doing a progression throught the site bar and I'm having a problem. There are four span elements that represents the sections of the frontpage, when you click on one of them it scroll to that section position. The problem is for some reason, the span element are taller than the div cointaining it, and for that, I can't align it vertically. It ain't a problem until you try to use the website on smaller resolutions, in wich, the span elements overflows the div.
Here is what I'm talking about
See that the right attribute is because of a script that positioned the span according to the section position.
And here is where the problem became obvious
Here is the HTML :
<header id="masthead" class="site-header" role="banner" style="position: relative; top: auto;">
<div class="container-fluid">
<div class="row">
<div id="progressDiv">
<span id="progBar">
</span>
<div id="SectionsPos">
<a href="/#features">
<span id="novedPos" class="sectPos"> Novedades </span>
</a>
<a href="/#about">
<span id="redesPos" class="sectPos tooBig"> Redes Sociales </span>
</a>
<a href="#ProductosPrinc">
<span id="prodPos" class="sectPos"> Productos </span>
<a href="#Contacto">
<span id="contPos" class="sectPos"> Contacto </span>
</a>
</div>
</div>
</div>
</div>
And here is the CSS :
#progressDiv {
display: block;
border: solid 1px;
border-color: #d9b25f;
position: relative;
width: 100%;
height: 10vh;
}
#progBar {
height: inherit;
display: block;
width: 0%;
background: #d9b25f;
max-width: 100%;
}
#SectionsPos{
display: block;
position: absolute;
width: 100%;
top: 50%;
height: 10vh;
margin-top: -5vh;
}
.sectPos {
font-weight: 900;
color: white!important;
position: absolute;
}
Excuse my English, it is not my native language, if there is something that it's not completely clear please let me know and I'll try to explain myself better
I kind of solved it but it is not an actual solution but a way to a avoid the problem, i changed de vh for pixels units, aparently you cant do what i wanted to do using vh units
In action:
http://jsfiddle.net/paulius_m/1xq2gn9s/4/
In details:
I have a big container for group of pictures.
In that container, I have 100x100 px containers floating to the left one beside another.
In each of those containers I have two images surrounded by anchor tags (both looks close to like that: <img src="/thumbnail.jpg" /><img src="download_button.jpg" />).
The first image/link is the thumbnail. The size of the thumbnail could vary, but will never exceed 100px in height and 100px in width. This is know from the server side. Basically, link of the thumbnail is for invoking a lightbox feature (I am skipping describing lightbox feature here, just know it is).
The second image/link is kind of download button. The button is always 20x20px. This is for downloading the biggest version of the same picture.
The thumbnail must be in the middle/center of floating 100x100 px div.
The download button (a/img tags) must be in the left bottom corner of the thumbnail.
The problem:
The problem is that I cannot figure out how to align the main image inside of middle/center of the 100x100 container and place the 20x20 download button on the left bottom corner of the image. The best version of what I have achieved so far could be seen in the jsfiddle link mentioned above.
Edit:
- The download button must always be on top of the image.
Markup (same as in jsfiddle link):
(HTML)
<div class="images">
<div class="image_container_outer">
<div class="image_container_inner">
<a href="http://lorempixel.com/100/67/" class="uploaded_image">
<img src="http://lorempixel.com/100/67/" class="uploaded_image">
</a>
<a href="bigger_image.png" download="bigger_image.png" class="download_button">
<img src="http://goo.gl/vEUcp6" class="download_button">
</a>
</div>
</div>
<div class="image_container_outer">
<div class="image_container_inner">
<a href="http://lorempixel.com/100/67/" class="uploaded_image">
<img src="http://lorempixel.com/100/67/" class="uploaded_image">
</a>
<a href="bigger_image.png" download="bigger_image.png" class="download_button">
<img src="http://goo.gl/vEUcp6" class="download_button">
</a>
</div>
</div>
<div class="image_container_outer">
<div class="image_container_inner">
<a href="http://lorempixel.com/60/100/" class="uploaded_image">
<img src="http://lorempixel.com/60/100/" class="uploaded_image">
</a>
<a href="bigger_image.png" download="bigger_image.png" class="download_button">
<img src="http://goo.gl/vEUcp6" class="download_button">
</a>
</div>
</div>
<div class="image_container_outer">
<div class="image_container_inner">
<a href="http://lorempixel.com/100/67/" class="uploaded_image">
<img src="http://lorempixel.com/100/67/" class="uploaded_image">
</a>
<a href="bigger_image.png" download="bigger_image.png" class="download_button">
<img src="http://goo.gl/vEUcp6" class="download_button">
</a>
</div>
</div>
<span class="clear_left"></span>
</div>
(CSS)
.image_container_outer {
display: block;
float: left;
height: 105px;
padding-top: 5px;
text-align: center;
vertical-align: middle;
width: 110px;
background-color: #000;
border: 1px solid #ffff00;
}
.image_container_inner {
display: inline-block;
height: 100px;
position: relative;
width: 100px;
background-color: #999;
}
a.uploaded_image {
bottom: 0;
display: inline-block;
left: 0;
position: absolute;
}
img.uploaded_image {
border: 0 none;
border-radius: 2px 0;
bottom: 0;
box-shadow: 5px 5px 50px -6px rgba(50, 50, 50, 0.3);
display: inline-block;
left: 0;
position: absolute;
}
a.download_button {
bottom: 0;
display: inline-block;
left: 0;
position: absolute;
}
img.download_button {
background-color: #fff;
border-radius: 2px;
bottom: 0;
display: inline-block;
left: 0;
position: absolute;
width: 20px;
}
Here's a JSFIDDLE to explain how this works.
And here is a JSFIDDLE from your code
To place something to absolute center use css like so:
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
and to place in the bottom left corner use css like:
position:absolute;
bottom:0;
left:0;
And to make the button on top of the image you can use:
z-index: 9999;
In your div create figure element, and then figcaption, this figcaption always on the bottom left side. in this figcaption create your button. may be its helpful.
<figure>
<img src="abcsd" alt="dsaer" width="304" height="228">
<figcaption>Your Button</figcaption>
</figure>
i have this div used as an information container on my page, i want to make a read more button on the bottom of the first div but cant do it, i tried position:relative and every other method i know to accomplish this but couldn't make it. any suggestion
<div class="main_banner" style="margin-left:46px;">
<center><b><h3 style="color:purple;padding-top:2px;margin-bottom:0">header1</h3></b></center>
<center><img src="images/pic1.png" width="275px" height="103px" /></center>
<p class="index_services_p">some text</p>
<br>
<a style="padding-top:2px;float:left;padding-left:10px;" href="#" style="float:left">
<img src="images/read-more.png" width="172px" height="32px" />
</a>
<div>
any suggestions will be appritiated.
the goal here is to make the always appear on the bottom of the main_banner DIV
The code doesn't make sense to the question you're asking.
However you can align an element to the bottom of another element by placing the parent relative and the child absolute:
HTML
<div>
Lorem ipsum
read more
</div>
CSS
div {
background: lightgreen;
width: 200px;
height: 200px;
position: relative;
}
div a {
display: block;
background: lightblue;
position: absolute;
bottom: 0;
right: 0;
}
DEMO.
The HTML..
<div class="main-banner">
BLAH..
<a class="read-more" href="#"></a>
</div>
The CSS...
.main-banner{
position: relative;
//other styles.
}
.read-more{
position: absolute;
top: 0px;
right: 0px;
left: 10px;
bottom: 10px;
}
I need to display an image on the top-right corner of a div (the image is a "diagonal" ribbon) but keeping the current text contained in an internal div, like stuck to the top of it.
I tried different things as including the image in another div or defining its class like:
.ribbon {
position: relative;
top: -16px;
right: -706px;
}
<div id="content">
<img src="images/ribbon.png" class="ribbon"/>
<div>some text...</div>
</div>
but without any luck. The best result I got was all the text scrolled down for the same height size of the image.
Any idea?
You can just do it like this:
<style>
#content {
position: relative;
}
#content img {
position: absolute;
top: 0px;
right: 0px;
}
</style>
<div id="content">
<img src="images/ribbon.png" class="ribbon" alt="" />
<div>some text...</div>
</div>
Position the div relatively, and position the ribbon absolutely inside it. Something like:
#content {
position:relative;
}
.ribbon {
position:absolute;
top:0;
right:0;
}
While looking at the same problem, I found an example
<style type="text/css">
#topright {
position: absolute;
right: 0;
top: 0;
display: block;
height: 125px;
width: 125px;
background: url(TRbanner.gif) no-repeat;
text-indent: -999em;
text-decoration: none;
}
</style>
<a id="topright" href="#" title="TopRight">Top Right Link Text</a>
The trick here is to create a small, (I used GIMP) a PNG (or GIF) that has a transparent background, (and then just delete the opposite bottom corner.)
Try using float: right; and a new div for the top so that the image will stay on top.
Example below:
#left{
float: left;
}
#right{
float: right;
}
<div>
<button type="button" id="left" onclick="alert('left button')">Left</button>
<img src="images/ribbon.png" class="ribbon" id="right">
</img>
</div>
<p>some text...
the image is on the top right corner</p>
<p>some more text...</p>
Firstly, I would like to show you a image(made in paint).
Okay "current" is what I have now. I want to place a box over the image to the right, with black background, and then have text inside this box.
I tried myself using z-index and so, but without any success. Here's what I tried:
<div> <!-- start div for image -->
<img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image -->
</div> <!-- end div -->
<div style="z-index: 1; width: 300px; background: #000; position: relative;">
<div style="margin: auto;">
text text text
</div>
</div>
but this didnt turn out any good. How can i do this?
Something like this?
http://jsfiddle.net/QGMPB/1/
HTML:
<div id="wrap">
<img src="http://jsfiddle.net/img/logo.png" />
<div id="text">text</div>
</div>
CSS
#wrap {
position:relative; /* make this relative to have the inner div absolute without breaking out */
width: 200px; /* fix the width or else it'll be the entire page's width */
background: silver;
border: 1px solid grey
}
#text {
position: absolute;
width: 40px;
right: 0;
top: 0;
bottom: 0;
background: black;
color:white
}
Your code is messy and overcomplicated for such a simple issue, you can simplify it a lot by only using two elements. The simpler the better.
Please specify if you need the <img> tag.
HTML:
<div id="golf_course">
<div class="text_wrap_right">
text text text text
</div>
</div>
CSS:
#golf_course
{
background-image: url(http://ww1.prweb.com/prfiles/2006/12/13/491548/ThaiGolfCourse.JPG);
background-position: 0 -200px;
width: 900px;
height: 259px;
border: 5px solid #000;
}
.text_wrap_right
{
width: 300px;
height: 100%;
float: right;
background: #000;
color: #fff;
border-left: 2px solid #000;
}
And an example for you here: http://jsfiddle.net/Kyle_Sevenoaks/WQT6G/
I prefer a simple and more semantic HTML5 solution
HTML:
<figure>
<img src="..." />
<figcaption>text text text ... </figcaption>
</figure>
CSS:
figure {
position : relative;
z-index : 1;
width : 860px;
height : 240px;
}
figcaption {
position : absolute;
z-index : 1;
top : 0;
right : 0;
width : 200px;
height : 240px;
background : #000;
}
Use position:absolute to overlap 2 divs. You have to play with left and top properties to adjust its position.
<div style="position:absolute"> <!-- start div for image -->
<img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image -->
</div> <!-- end div -->
<div style="position:absolute; z-index: 1; width: 300px; background: #000; position: relative; left:3%; top:85%">
<div style="margin: auto;">text text text</div>
</div>
You need to put that text div inside the div that contains the image.. then set top and right to 0px and position absolute. take some hints from here: http://jsfiddle.net/U25XQ/1/
The following example shows how this can be done, please let me know if it is not what you mean: Example.
z-index only works for positioned elements (position: (absolute|fixed|relative)). So you have to position your elements. For example
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; z-index: 0; height: 100px; width: 300px;">
<img src="http://w3schools.com/images/w3cert.gif" />
</div>
<div style="z-index: 1; width: 200px; background: #000; position: absolute; left: 100px; color: #fff;">
<div style="margin: auto;">text text text</div>
</div>
</div>
should work.
For writing text over image you put image in background style and alt text like this-
<img scr="" alt="text"/>
<style>
.img{background-image:url('IMAGE_URL'); }
</style>