I have seen a lot posts about this, I know it's simple but I cannot get my example to work and I would like to understand why as I still did not grasp the concept of positioning in CSS.
I am using simple bootstrap in my App. I have a container with row and col-md-6. My code looks like this.
<section id="automat" class="box bg-light-grey">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="images/iPod.png" class="scaleImage"/>
</div>
</div>
</div>
</section>
And my custom css style for image looks like this (depending on screen size I will control the size of img element).
.scaleImage {
width:300px;
height:auto;
position:relative;
margin:0 auto;
}
As you can see, I have tried to set the exact width of my element, with position:relative and margin:0 auto. According to the other posts, this is supposed to be enough to center my element inside my container, but it's not. It is still locked on the very left side of my col-md-6 container.
My question is following: Why my solution is not working and how do I need to change my code to get this to work?
Is this working?
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<img src="images/iPod.png" class="scaleImage" style="width:100%;height:100%"/>
</div>
<div class="col-md-3"></div>
</div>
</div>
You can try like this,
section{
background: gray;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="automat" class="box bg-light-grey">
<div class="container text-center">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="https://www.sfu.ca/content/sfu/publicsquare/_jcr_content/below-nav/parsys/image.img.jpg/1406566003083.jpg" class="scaleImage" />
</div>
</div>
</div>
</section>
You can use bootstrap class 'text-center' to center. So, you do not need to use margin:0 auto.
Here you have defined an offset too. You do not need offset to center a div.
.scaleImage {
width:300px;
height:auto;
position:relative;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="automat" class="box bg-light-grey">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<img src="https://d3nevzfk7ii3be.cloudfront.net/igi/tcbxa1Eb6YMETIW2.large" class="scaleImage"/>
</div>
</div>
</div>
</section>
margin: 0 auto would not work because image is inline-block element (look: Why doesn't margin:auto center an image?)
To align image do text-align: center on parent div or <div class="container text-center">.
try to add one more class, text-center to col-md-6. It will center align the content.
position:relative;
float:none;
width:100%;
max-width:300px;
margin:auto;
DISPLAY:BLOCK
so to center your element in the middle you need this combination of css properties
Related
I'm trying to design a container with bootstrap that always fits the screen size (both height and width). But as you can see in the example, it fits the height well, but when doesn't fit the width of all the screen size.
What am I missing here? Thanks in advance for your suggestion.
This is the code is:
html,body{height:100%;}
.fill{
width:100%;
height:100%;
min-height:100%;
background-color:#990000;
color:#efefef;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container fill">
<div class="container">This is the title</div>
<div class="container">
<div class="row">
<div class="col-6">Item 1</div>
<div class="col-6">Item 2</div>
</div>
<div class="row">
<div class="col-6">Item 3</div>
<div class="col-6">Item 4</div>
</div>
</div>
<div class="container">Author: Mr. X</div>
</div>
Bootstrap applies a max-width attribute to .container.
Add this CSS and you should be good:
.container {
max-width: unset;
}
I am having trouble to put in horizontal lines between 2 images. Not sure how to go about doing this as I have just started learning Bootstrap.
I would like to achieve like the below image:
http://i.stack.imgur.com/9vJdm.png
Just have a look at this code will be useful for you
<style>
img{
width:10%;
display:inline-block;
}
.col-lg-5, .col-lg-2{
padding-left:0px;
padding-right: 0px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-5" style="text-align:right">
<img src="path/img1.jpg">
</div>
<div class="col-lg-2">
<hr>
</div>
<div class="col-lg-5">
<img src="path/img2.jpg">
</div>
</div>
</div>
</body>
Based on the size of the image(default) you can change width and col-lg-, col-md-, col-sm-, col-xs- values and also CSS. Its working fine for me.
I need to move the red circle image to the position shown as in below photo:
My code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>領収書</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
{% if receipt %}
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<h2>領収書
</h2>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3 col-xs-offset-3">
<h5>No. {{receipt['receipt_number']}}</h5>
<h5>{{receipt['date']}}</h5>
<hr/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 text-center">
<h3>{{receipt['c_name']}} 様</h3>
<hr/>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 text-center">
<h3><b>￥ {{receipt['amount']}}</b><br/>
</h3>
<hr/>
<h3>
但 {{receipt['quantity']}} {{receipt['product']}}<br/>
</h3>
<h4>
上記正に領収いたしました
</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 text-center col-xs-offset-6">
<h5>xxxxxxxxxxxxxxxxxxxxxxxxxx</h5>
<h5>xxxxxxxxxxxxxxxxxxxxxxx</h5>
<img src='inkan.PNG'/>
</div>
</div>
</div>
{% endif %}
<!-- /container -->
</body>
</html>
Could anybody tell me how to do it?
Just add these style to your img and play with "right" value;
<img src='inkan.PNG' style="position: absolute; right: 200px;"/>
Just add the image as a background, like this:
<div class="col-xs-6 text-center col-xs-offset-6" style="background:url(urlhere) no-repeat">
Refer to this link for more info.
Give the div an id and then add it ad css property background: url({url}); like so:
HTML:
<div id="myDiv"></div>
CSS:
#myDiv {
background: url({url});
}
Include that CSS code either from a separate file or in <style/> tags.
I also recommend you try the web course on CodeCademy to learn most of everything you need to know about HTML & CSS.
If you would use a Background, it wouldn't be printed by some Browsers.
Best way to solve this is that you use relative (or absolute) Positioning on the Image Element.
But you must fix a little thing on the col- divs from Bootstrap. Basically they don't have any position Attribute, so you can't really use the position Attribute on the child elements.
So first, let's fix the positioning Inheritance problem:
.row > div { position:relative; }
Go for this CSS Rule as example to have it relative, you may use also position: absolute and or additionally float:right, but I think this should be fine, depends on your content. I've used 100px for your Image as example size, change this as you need.
.inkan_image { position:relative; top:0px; right:0px; width:100px; height:100px }
In Your HTML you just need to add your class to the Image.
By the way: I would position the Image as first element in your Content, as it will float or will be positioned on the right side and the content just swaps in then.
<img src='inkan.jpg' class='inkan_image'>
I have a question about css clear float.
My question is when I declare div{float:left;} to all the page, then in some part, I still want some div display center of the screen, like width:960px;margin:0 auto. How to clear this div's float?
see code in: http://jsfiddle.net/37wnT/ and review in http://jsfiddle.net/37wnT/show/
I need div#nav and div#content these two div center of the screen, but other div still obey the rule float:left;
I have modified your code little bit. take a look.
<html>
<head>
<style>
div.main{float:left;}
#header{width:100%;height:100px;}
#nav{clear:both;width:800px;margin:0 auto;}
.nav{width:200px;text-align:center;font:16px/150%;}
#wrap{width:100%;height:100%;}
#content{clear:both !important;width:960px;height:100%;margin:0 auto;}
.col{width:300px;height:300px;margin:0 10px 0 10px;background:red;display:block;}
</style>
</head>
<body>
<div id="header">
<div id="nav">
<div class="nav main">home</div>
<div class="nav main">info</div>
<div class="nav main">products</div>
<div class="nav main">cantact</div>
</div>
</div>
<div id="wrap">
<div id="content">
<div class="col main" >ds</div>
<div class="col main">ds</div>
<div class="col main">ds</div>
</div>
</div>
</body>
</html>
This is the new jsfiddle
<div id="content">
<div class="col">1</div>
<div class="col" >2</div>
<div class="col" style="clear:left;margin-top:10px">3</div><br> <-- changes here
</div>
I am not sure if this is what you want.
I'm trying to replace some layouts table layouts with css layouts and have this code:
<html>
<head>
<style type="text/css">
#grid{
border:solid;
border-width:1px;
border-color:#000000;
width:300px;
max-width:300px;
min-width:300px;
overflow:hidden;
font-size:14px;
}
#grid .item{
text-align:center;
width:33%;
margin-top:2px;
margin-bottom:2px;
float:left;
}
</style>
</head>
<body>
<div id="wagerStream">
<div id="grid">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
</div>
<div id="grid">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4 with wrapping text</div>
<div class="item">item5</div>
<div class="item">item6</div>
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
</div>
</div>
</body>
</html>
As you can see I have a problem with the way the last three items display when wrapping text occurs and would to know what would be a good css solution.
set additional two styles on item class:
white-space: nowrap;
overflow: hidden;
That should do the trick.
You will need to specify a height to the .item. Because floating elements always set their height to the minimum they need.
So, add the following line to your .item
height:<amount>px;
The only solution I could think of without using JavaScript and without specifying a set height to your items, is to wrap every 3 items in a row.
<div id="grid">
<div class="item-row">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
<div class="item-row">
<div class="item">item4 with wrapping text</div>
<div class="item">item5</div>
<div class="item">item6</div>
</div>
<div class="item-row">
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
</div>
</div>
You'd want to have overflow:hidden applied to item-row to contain the floated items.