I am trying to align both the text and the right arrow (with Google fonts) in the middle of the div but no matter what I tried, I could not succeed. How can they be aligned?
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div style="width:300px; background-color:#ADD8E6; padding:0.5rem 1rem; text-align:center;display:inline-block;">
<div style="float:right;">
<span class="material-icons" style=" font-size:2rem;"></span>
</div>
<div style="padding-left:20px; padding-right:20px;">
Some Text
</div>
</div>
You can either set margin-top: 7px on the text element, or preferably, set a line-height equal to the height of the container (in this case, 36px), minus a few pixels to counter the height of the icon. In this example, I've gone with 34px:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div style="width:300px; background-color:#ADD8E6; padding:0.5rem 1rem; text-align:center;display:inline-block;">
<div style="float:right;">
<span class="material-icons" style=" font-size:2rem;"></span>
</div>
<div style="padding-left:20px; padding-right:20px; line-height: 34px;">
Some Text
</div>
</div>
Hope this helps! :)
You can use absolute positioning on the arrow, and top: 50%; transform: translateY(-50%); to center it vertically.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div style="width:300px; background-color:#ADD8E6; padding:0.5rem 1rem; text-align:center;display:inline-block; position: relative;">
<span class="material-icons" style=" font-size:2rem; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%);"></span>
<div>
Some Text
</div>
</div>
Related
How can I float the image of the modem as shown below, to be above the span below it. I have used Div for the label and span for the contents, however this can be changes to suit. see my code below.
Image:
Code:
<style>
#primary_modem_label{
position: absolute;
width: 100%;
height: 15%;
background-color: black;
background-image:url(/assets/Billion7800NX.png);
background-size: 30px; /* <------ */
background-repeat: no-repeat;
background-position: left center;
font-family:arial;
font-size: 1.2vw;
color:white;
}
.primary_modem_class{
position: relative;
float: left;
width: 30%;
font-size: 2.5vw;
margin:0.2%;
background: #aaaaaa;
overflow:hidden;
}
</style>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="assets/jqm-icon-pack-3.0.0-fa.css">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="shortcut icon" href="/favicon.ico">
<div id="page" data-role="page" data-theme="a" data-url="page" tabindex="0" class="ui-page ui-body-a ui-page-active" style="min-height: 628px;">
<div data-role="header" data-position="inline" data-theme="d" data-backbtn="false" class="ui-header ui-bar-d" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">QKradio Monitor</h1></div>
<div class="primary_modem_class" id="primary_modem_stable_div">
<div id="primary_modem_label">              Primary Modem</div>
<span class="font1"><br>Down Link: </span>
<span id="local_primary_connection_adsl_down_speed" class="font5">updating</span>
<span class="font1"><br>Up Link: </span>
<span id="local_primary_connection_adsl_up_speed" class="font4">updating</span>
<span class="font1"><br>Current Up speed: </span>
<span id="primary_upload_speed" class="font4">updating</span>
<span class="font1"><br>Uptime: </span>
<span id="local_primary_connection_uptime" class="font4">updating</span>
</div>
Why can't use img tag instead of background-image like the below?
Also,please use text-align to align the "Primary modem" in the center instead of using  
<style>
#primary_modem_label{
position: absolute;
width: 100%;
height: 15%;
font-family:arial;
font-size: 1.2vw;
color:white;
background-color:black;
text-align:center;
}
.primary_modem_class{
position: relative;
float: left;
width: 30%;
font-size: 2.5vw;
margin:0.2%;
background: #aaaaaa;
overflow:hidden;
}
</style>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="assets/jqm-icon-pack-3.0.0-fa.css">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="shortcut icon" href="/favicon.ico">
<div id="page" data-role="page" data-theme="a" data-url="page" tabindex="0" class="ui-page ui-body-a ui-page-active" style="min-height: 628px;">
<div data-role="header" data-position="inline" data-theme="d" data-backbtn="false" class="ui-header ui-bar-d" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">QKradio Monitor</h1></div>
<div class="primary_modem_class" id="primary_modem_stable_div">
<div id="primary_modem_label"><img src="w3css.gif" align="left"/> Primary Modem</div>
<span class="font1"><br>Down Link: </span>
<span id="local_primary_connection_adsl_down_speed" class="font5">updating</span>
<span class="font1"><br>Up Link: </span>
<span id="local_primary_connection_adsl_up_speed" class="font4">updating</span>
<span class="font1"><br>Current Up speed: </span>
<span id="primary_upload_speed" class="font4">updating</span>
<span class="font1"><br>Uptime: </span>
<span id="local_primary_connection_uptime" class="font4">updating</span>
</div>
use the tag and write the path on the src attribute... then, you have 2 options, put the img (html) before whatever you want to be on top, and/or use z-index in css or style attribute to make the image come to top.
I'm trying to add text on hover over an image inside a row and col-md-3. I want it to change opacity to set ideal while displaying text in centered inside the image.
I have the opacity hover down but I'm struggling with the data-hover class and I have no clue where to place the text I want inside HTML and CSS
I've included a fiddle here with all the work I have accomplished thus far: https://jsfiddle.net/a8u05mw1/
HTML:
<div class="container-fluid">
<div id="wrapper">
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg>
</div>
<div class="col-md-3">
<img class="img-responsive" src=https://www.roys.co.uk/media/wysiwyg/FASHION/MENSWEAR-AW16-JOULES-COAT.jpg>
</div>
<div class="col-md-3">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/b1/5e/38/b15e38cd4864c85a52897d906a88710c.jpg>
</div>
<div class="col-md-3">
<img class="img-responsive" src=https://static1.squarespace.com/static/56b6a4bd07eaa0d2d0eddb7f/58678682bebafb6e8b0a4e2a/5867868b893fc0dff9edd97d/1483179664063/Andrew+Belliot-011.jpg?format=500w>
</div>
</div>
</div
</div>
CSS:
#wrapper img {
width: 100%;
transition-duration: 0.8s;
}
.col-md-3 {
padding: 0;
}
#wrapper img:hover {
opacity: 0.8;
transition-duration: 0.8s;
}
Answer 1: Without Bootstrap
jsfiddle answer 1
<div class="container-fluid">
<div id="wrapper">
<div class="row">
<div class="col-md-3">
<div class="img-container">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg style="width:100%;">
<div class="img-hover-text centered">Your text here</div>
</div>
</div>
<div class="col-md-3">
<div class="img-container">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/b1/5e/38/b15e38cd4864c85a52897d906a88710c.jpg>
<div class="img-hover-text centered">Your text here</div>
</div>
</div>
<div class="col-md-3">
<div class="img-container">
<img class="img-responsive" src=https://static1.squarespace.com/static/56b6a4bd07eaa0d2d0eddb7f/58678682bebafb6e8b0a4e2a/5867868b893fc0dff9edd97d/1483179664063/Andrew+Belliot-011.jpg?format=500w>
<div class="img-hover-text centered">Your text here</div>
</div>
</div>
</div>
</div>
</div>
Note: I removed the image which is no more available.
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* original example from question */
.img-responsive:hover + .img-hover-text {
display: block;
}
.img-hover-text:hover {
/* needed for the text to stay visible
when the cursor it just over it.
*/
display: block;
}
.img-hover-text {
display: none;
color: white;
font-size: 20px;
}
Answer 2: With Bootstrap
jsfiddle answer 2
I made a new example inspired with your code, but using tooltips from Booststrap / Popper.js. I used the bootstrap starter template to quickstart the use of Boostrap.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="img-container">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg style="width:100%;" data-toggle="tooltip" data-placement="auto" title="This is a Tooltip">
<div class="img-hover-text centered">Your text here</div>
</div>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
body {
padding: 20px;
}
.img-container {
position: relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.img-responsive:hover + .img-hover-text {
display: block;
}
.img-hover-text:hover {
/* needed for the text to stay visible
when the cursor it just over it.
*/
display: block;
}
.img-hover-text {
display: none;
color: white;
font-size: 20px;
}
// Enable tooltip everywhere
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Explaining Answer 1:
You want two things:
First, center some text over an image.
Then, apply a hover effect on the text so that it only appears when the cursor is hovering the image.
You can get a cool tutorial on how to center text over an image here | w3school.
<div class="container">
<img src="https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg" alt="Snow" style="width:100%;">
<div class="centered">Centered</div>
</div>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This will give you the following picture:
Warning: Don't be like me. Don't waste your time on a <p>. Use a <div> for the text directly.
<div class="container">
<img src="https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg" alt="Snow" style="width:100%;">
<p class="centered">Not Centered</p>
</div>
Otherwise you will see this:
Ok, now we have our centered text. Time to make it disappear. Let's go back to your code and modify it.
<div class="col-md-3">
<div class="img-container">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg style="width:100%;">
<div class="img-hover-text centered">Your text here</div>
</div>
.img-responsive:hover + .img-hover-text {
display: block;
}
.img-hover-text {
display: none;
color: white;
font-size: 20px;
}
However, if we stop there, something will be wrong. When we hover the cursor right on top of the text area, the text disappear! To correct that, add a last css rule:
/* needed for the text to stay visible
when the cursor it just over it. */
.img-hover-text:hover {
display: block;
}
Explaining answer 2
The idea is not to do the stuff we made by hand, by using a library: namely Popper.js which fortunately is used by Boostrap. We include the tooltip with data-toggle="tooltip" data-placement="auto" title="This is a Tooltip" inside the element we want to display the tooltip on hover. Here inside <img>.
To make is works, we also need to import the necessary library. Don't forget the <script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> at the end, just before closing </body> flag.
Done!
Long story short for those looking for a Boostrap answer.
Add a tooltip in the flag you want.
<img src=... data-toggle="tooltip" data-placement="auto" title="This is a Tooltip">
// Enable tooltip everywhere
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Don't forget to add Popper.js which is needed for the tooltip.
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
I'm making a header with Bootstrap. My page-header contains an image and text. I want the text to be vertically centered in the header. It seems like an easy, fix, but I'm running into trouble. I made a custom class called v-align where I set the vertical-alignment: middle;, but it's not working. Any suggestions?
Image:
HTML:
<html>
<head>
<!-- CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="form-container">
<div class="page-header text-center">
<div class="row">
<img class="col-xs-4"src="Popcorn.png" width="100" height="auto" >
<div class="col-xs-8 v-align">
<h2>Sparky's Movie Theater</h2>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
</body>
</html>
Css Class:
.v-align {
height: 100%;
display:table-cell;
vertical-align: middle;
}
I was able to get my text to be vertically aligned by adding the following to my css code:
CSS:
#box {
height: 100px;
line-height: 100px;
text-align: center;
}
#spantext {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
HTML:
<div class="col-xs-8" id="box">
<h2 id="spantext">Sparky's Movie Theater</h2>
</div>
Remove the padding and margin in <H2>
h2{
margin:0;
padding:0;
}
This is my code:
<div id="wrapper">
<header>
<div id="header">
<img src="http://s22.postimg.org/vdwnuxg4x/logo.png" alt="logo" />
</div>
<div class="header-content">
<img src="http://s22.postimg.org/tndmtfylt/banner.png" alt="banner" />
<div class="issue">
<img class="issue-image-1" src="http://s22.postimg.org/jniqdjncd/issue_no_img.png" alt="issue" />
<span class="issue-no">Issue No.<br /><b>376</b></span>
</div>
<div class="header-content-center">
<p>
<span class="new">NEW!</span>
<date>JUN O7,2013</date>
</p>
<p><i>Get your breakpoints on.</i></p>
<h1 class="h1-clear">DOT NET ARTICLES</h1>
<p><i>by</i> <a class="jon" href="#"> JOHN WOO</a><i>-10 comments</i></p>
<form>
<input type="search" placeholder="Search.."/>
</form>
</div>
</div>
<hr class="hr-style" />
</header>
This is my jsfiddle:
http://jsfiddle.net/vas4bxu5/
here banner.png and issue_no_img.png are displayed in header, it shows, backside of issue image, there is display of banner image, i want to hidden that .
I used z-index:9999; or z-index:-9999; , still nothing change.
May i know what is the exact css property to fix this.
You need to change some styles and by the way z-index works with positioned elements, change your CSS like following:
.issue
{
width: 23px;
height: 50px;
float:left;
position:relative; /* added this */
}
.issue-no
{
color: #fff;
font-size: 16px;
font-weight: 700;
left: 30px; /* updated this */
position: absolute;
top: -80px; /* updated this */
line-height: normal;
}
Demo
I'm trying to create two side by side divs in a wrapper. The first div, #content, is a position:relative div.
#wrapper {
background-image: url(assets/images/BG2.gif);
margin-right: auto;
margin-left: auto;
width: 996px;
overflow: auto;
}
#content {
position: relative;
top: 10px;
left: 10px;
width: 745px;
background-color: red;
}
#important {
float: right;
position: relative;
top: -1120px;
width: 231px;
margin-right: 10px;
background-color: green;
}
The problem is that the second div, #important, is displayed under the first one. There is enough space for both divs and the padding/margins. I can make it work by floating it to the right and using a negative top position and it displays fine, but I feel as though there is a better/correct way of doing this.
HTML:
<div id="wrapper">
<div id="content">
<img src="assets/photos/bid day 046.jpg" alt="Bid Day" width="745" height="311" />
<div id="fraternity">
<p align="center"><span class="style5"><strong>TITLE</strong><br />
Subtitle<br />
Sub-subtitle</span></p>
<p align="justify">depry derp</p>
<p align="justify">derp derp derp</p>
<p class="style5" align="center"><br/><strong>Title<br/>
Twitter Feed</strong></p>
<div id="twitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>...</script>
</div>
</div>
<div class="fb-like-box" data-href="something" data-width="292" data-colorscheme="dark" data-show-faces="false" data-stream="true" data-header="false">
</div>
</div>
<div id="important">
<p align="center"><strong>IMPORTANT INFORMATION</strong><br />Derp!</p>
<img class="divider" src="assets/images/hr.gif" alt="HR" width="183" height="15" />
<p align="center"><strong>Achievements<br /></p>
<img class="divider" src="assets/images/hr.gif" alt="HR" width="183" height="15" />
<p align="center" class="style11"><strong>UPCOMING EVENTS<br /></strong>stuff<br /></p>
<p align="center"><br /> <strong>more stuff</strong><br /></p>
</div>
</div>
Make the #wrappers position be relative or absolute.
Then set the inner div positions to be absolute.
jsfiddle example: http://jsfiddle.net/kRHTj/
I would float them both left or right.