Im trying to get an image to be in the same row as my text in my ABOUT section.
I've tried to wrap my <div class="portrait"> and <p> into a <div class="wrapper"> with css flex-direction:row
Heres a pen: https://codepen.io/anon/pen/MqRdjb
I think some CSS is being overwritten, or I'm not using my CSS properly.
Thanks for any and all help!!
flex-direction: row has no effect without including display: flex.
Adjust the wrapper css to:
.wrapper {
flex-direction: row;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
You can also refactor the margins for the elements inside the wrapper if you want to center them. Any vertical margins can be removed and applied to the wrapper itself.
.portrait{
width:100px;
height:150px;
margin-left: auto;
margin-right: 10px; /* Align your image right */
z-index: 1;
border-radius: 10%;
background-color:#555;
}
.ABOUT p{
font-size:1.2em;
text-align: center;
margin-right: auto; /* align text left */
}
Related
I have to align two contents in div as per below screenshot. I do not want to use flex as I am completely new to it. I have bootstrap3 library in my project
first content exactly at center
second content should be at extreme right. very minimum space at right corner will be ok.
I checked, float:right but it is not aligning second content at extreme right. how to fix?
Use display: flex and add invisible element. Then use justify-content: space-between; to align the items one on the left, one center and one on the right.
If you need vertical center use align-items: center;
Learn more on flex here. The bootstrap documentation does great job visualizing more configurations.
.parent {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid black;
width: 200px;
height: 40px;
}
.left-child {
visibility: hidden;
}
.center-child {
background: red;
width: 10px;
height: 20px;
}
.right-child {
background: red;
width: 10px;
height: 20px;
}
<div class="parent">
<div class="left-child"></div>
<div class="center-child"></div>
<div class="right-child"></div>
</div>
In my answer, you have to change the margin-top of the right content as the font-size or height of the center content
<style type="text/css">
.center{
text-align:center;
margin:auto;
display:block;
}
.right{
float:right;
margin-top:-18px;
}
</style>
<span class="center">Center</span>
<span class="right">Right</span>
Stubborn text will not move to the top of the div.. no matter what i do? Please help
<div class="totals" style="display:flex; align-content: flex-start; justify-content: space-between; width:100%; background-color:green;">
<p style="color:#0e487f; background-color:red;">£1,000</p>
<p style="color:#0e487f;">£50,000</p>
</div>
Thanks
The margin from the p elements pushing the text down. You can easily see this if you right-click on the element and select "Inspect element".
Remove the margin, and add a padding to .totals if you still want the spacing (I haven't added a padding in the code).
Never ever use styles; use classes.
.totals {
display: flex;
align-content: flex-start;
justify-content: space-between;
width: 100%;
background-color: green;
}
.value {
color: #0e487f;
margin:0px; /* ADDED*/
}
.red.value {
background-color: red;
}
<div class="totals">
<p class="red value">£1,000</p>
<p class="value">£50,000</p>
</div>
First , you have margin and maybe padding that you need to remove , i advise you to always start clean from margins and padding
* {
padding : 0 ;
margin : 0;
}
Second , if the parent element do sent have height then the flex items wont flex simply because there is no room
just add height ,remove padding your code is working and use classes
It's on top but you have a margin top and a margin bottom. You can see it with the inspector. It's a default CSS property of the p tag. Use padding instead on your div
#p1{
background-color:red;
}
p{
#0e487f;
margin:0;
}
.totals{
display:flex;
align-content: flex-start;
justify-content: space-between;
width:100%; background-color:green;
}
<div class="totals">
<p id="p1">£1,000</p>
<p>£50,000</p>
</div>
An advice: don't use CSS inside html tag, create a separate file and call it in your page / template. In the worst case, use style tag and insert your CSS inside it.
<style>
.totals{
width: 100%;
height: 50px;
position: relative;
background-color: green;
}
.first{
color:#0e487f;
background-color:red;
position: absolute;
left:0;
top:-15px;
}
.second{
color:#0e487f;
background-color:red;
position: absolute;
right: 0;
top:-15px;
}
</style>
<div class="totals">
<p class="first">£1,000</p>
<p class="second">£50,000</p>
</div>
.totals {
display: flex;
align-items: flex-start; /* use align-items: flex-start */
justify-content: space-between;
width: 100%;
height: 50px;
background-color: green;
}
.m-0{
margin:0px; /* ADDED*/
}
.red {
background-color: red;
}
<div class="totals">
<p class="red m-0">£1,000</p>
<p class="m-0">£50,000</p>
</div>
Is it possible to have the content of a div vertically centred?
<div style="padding-left: 15px; vertical-align: middle; align-content: center" >
<h3>Selections</h3>
</div>
I want the text left aligned and in the vertical middle
I gave you an example of vertical alignment using flex rules. In this case, the vertical alignment occurs with the help of an align-item: center. Also, you need space for vertical alignment.
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
<div>
<h3>Selections</h3>
</div>
Well it's an easy property you can set. You can set the text-align property. You can read more about this below.
https://www.w3schools.com/cssref/pr_text_text-align.ASP
for vertical centering:
https://www.w3schools.com/css/css_align.asp
You want to use the CSS property text-align. Also remove the inline 'style' you have on your div and use a css file
.center-content {
text-align: center;
width: 100%;
}
<div class="center-content">
hello world
</div>
If you are oke with setting the height of the h3 tag, you can do this:
h3{
height: 4%;
margin-top: 48%;
margin-bottom: 48%;
}
Otherwise do this;
h3{
margin-top: 50%;
margin-bottom: 50%;
}
So I am learning a bit more about using CSS flex instead of using static positioning of content. However, I have defined my link styles as well as bold styles. My guess is that it's adapting to the container that is in (which is using flex feature) and that is why it is stretching across the size of the container it is inside. My question now is, how do I fix this? I've seen that I can do "display:inline-block" on the link, but that has not fixed it.
Here is my code:
.container{
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width: 80%;
margin: auto;
background-color:#fff;
overflow: hidden;
font-size: 15px;
line-height: 20px;
padding:1em;
}
.container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
a{
text-decoration:none;
border-bottom-style:double;
border-bottom-width:2px;
color:#99d3df;
display:inline-block;
padding:0px;
overflow: hidden;
}
i{
display:inline-block;
color:#88bbd6;
text-decoration:italic;
}
And what I have:
This is a Google Link<BR>
Google is <i>extremely helpful</i>!
This is what it looks like for reference.
Problem image
It seems you missed the .container wrapper div in the markup you provided.
Let's look at this code:
<!-- HTML -->
<div class="container">
<span>This is a </span><a href="http://google.com">Google Link</a
</div>
<div class="container">
<span>Google is </span><i>extremely helpful</i>!
</div>
<!-- /HTML -->
/* CSS */
.container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
Property flex with value of 1 100% means we tell the browser to style any elements (the asterisk *) nested in .container to have 100% width of their parent's width.
I would suggest you to just remove that part to fix the problem.
Here's my approach to your markup.
.container {
display: flex;
width: 80%; /* flexible value */
flex-direction: row; /* this is to make sure that we'll have side-to-side layout within .container */
}
a {
text-decoration: none;
border-bottom-style: double;
border-bottom-width: 2px;
color: #99d3df;
display: inline-block;
padding: 0px;
}
a, i{
margin-left: 5px; /* this is to give a 10px spacing */
}
<div class="container"><span>This is a </span>random link<span></span></div>
<div class="container"><span>Google </span><i>is extremely helpful! </i></div>
It is working fine when I tried your code in js fiddle
see in this image
May be some other css is affecting your links to stretch it out.
I have a dashboard I am setting up that has wrapper blocks with a sprite icon that should be centered vertically and horizontally inside its parent.
I got the blocks to be placed how I want and wrapping how I want using flexbox.
I also have the icon centered horizontally using the text-align property, but for some reason justify-content: center doesn't do anything when I add it to the .view or .sprite-icon elements; adding it to the .views element also doesn't center things how I want and it breaks the padding between the .view blocks.
See my JSFiddle I set up showing the issue here: https://jsfiddle.net/efarley/k0m4nxny/
.views {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.view {
height: 105px;
text-align: center;
width: 105px;
}
.sprite-icon {
background-image: url('http://67.media.tumblr.com/b2336d673e315081b6d657f8258c313d/tumblr_mv98xzSiJu1qhori9o1_500.jpg');
display: inline-block;
height: 35px;
width: 35px;
}
.sprite-icon.one {
background-position: 0 0;
}
.sprite-icon.two {
background-position: 0 35px;
}
.sprite-icon.three {
background-position: 0 70px;
}
<div class='views'>
<div class='view'>
<span class='sprite-icon one'></span>
</div>
<div class='view'>
<span class='sprite-icon two'></span>
</div>
<div class='view'>
<span class='sprite-icon three'></span>
</div>
</div>
You need to make your view a flex container, then add flex centering properties.
.view {
height: 105px;
text-align: center;
width: 105px;
display: flex; /* new */
align-items: center; /* new */
justify-content: center; /* new */
}
revised fiddle
Note that the justify-content property only applies to flex containers. In your question, you were applying it to a flex item. That's why it failed.
Learn more about flex centering:
How to Center Elements Vertically and Horizontally in Flexbox
Methods for Aligning Flex Items
Try these settings:
.sprite-icon {
display: block;
position: relative;
margin: 35px auto;
background-image: url('http://67.media.tumblr.com/b2336d673e315081b6d657f8258c313d/tumblr_mv98xzSiJu1qhori9o1_500.jpg');
height: 35px;
width: 35px;
}
margin 35px auto centers it horzontally (when position is relative) and moves it down 35px, which centers it vertically, but only since display is now block. I erased text-align: center in .view
Fiddle: https://jsfiddle.net/0t4vbzxb/1/