I want to write these two addresses in my heading, I tried this code but "/" doesn't place in the same line. could anyone help me fix it?
<header>
<nav class="header">
<h1>CRIS</h1>
<p class="light_grey">Art direction design</p>
<div class="address">
<address>Call me (+706)098-0751</address>
<p>/</p>
<address>cris#gmail.com</address>
</div>
<p>Menu</p>
</nav>
</header>
and this is css code :
.header {
justify-content: space-around;
display: flex;
}
.address {
display: flex;
justify-content: space-around;
}
You need to add align-items: center to it:
.address {
display: flex;
justify-content: space-around;
align-items: center;
}
<div class="address">
<address>Call me (+706)098-0751</address>
<p>/</p>
<address>cris#gmail.com</address>
</div>
Because by default, <p> tag has some vertical margins applied it, you could also set .address p { margin: 0; } to get rid of it.
There are several solutions to your problem. For example, here are two of the many:
This is #Hao Wu answer, using align-items: center. <--- Better use this solution.
This is to use margin rules, like this:
.address address,
.address p {
margin-top: auto;
margin-bottom: auto;
}
Related
Is there any way to center elements that use text-align: left and doesn't involve display: inline-block?
I'm creating an epub and when centering the paragraphs through div and inline-block it breaks the page layout (see links with example).
HTML
<h2 class="numero_hino"></h2>
<h3 class="titulo_hino sigil_not_in_toc"></h3>
<div class="centralizar-div">
<div class="estrofe-div">
<p class="estrofe"></p>
<p class="estrofe"></p>
<p class="estrofe"></p>
</div>
</div>
CSS
div.centralizar-div {
text-align: center;
}
div.estrofe-div {
display: inline-block;
text-align: left;
}
How it should be:
Book in continuous mode (scroll down)
How it is:
Book in single page mode
If anyone can help me :D
try change .estrofe-div p { display: inline-block; text-align : center }
Please try the below css
div.estrofe-div {
display: flex;
align-items: center;
justify-content: center;
}
Since your are using inline-block on your divs as way to position your content, we keep it the same and add an extra css targeting only the tags.
div.centralizar-div {
text-align: center;
}
div.estrofe-div {
display: inline-block;
text-align: center;
}
div.estrofe-div p {
text-align: left;
}
Because of people's comments, I was researching until I found a way to solve the problem through flex items.
Follow the code
div.centralizar-div {
display: flex;
flex-flow: column wrap;
align-items: center;
}
I am trying to add a hyperlink at the right on the same line of my heading, but I am unable to do so. please help. Thanks!
You can try this.
div {
display: flex;
justify-content: space-between;
align-items: center;
}
h1 {
text-align: center;
}
a {
align-self: safe center;
}
<div>
<span></span>
<h1>title</h1>
link
</div>
I've been trying to get these objects to center and when I used an <a href> tag, I could see that I was able to click way away from the picture and still the link would activate. I am assuming this means that the child containers are taking up 50% of the width each, despite only a tiny portion of the container being full. Why is there blank space that is preventing me from aligning my objects?
RELEVANT HTML:
<div class="container">
<div class="previous">
<img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
<p>Previous Project </p>
</div>
<div class="next">
<img class="containerimg" src="https://i.imgur.com/s11MTLc.png">
<p> Next Project</p>
</div>
</div>
RELEVANT CSS:
.container {
display: flex;
justify-content: center;
}
.containerimg {
width: 30%;
height: auto;
}
.next {
display: flex;
flex-direction: column;
}
.previous{
display: flex;
flex-direction: column;
}
CODEPEN: https://codepen.io/daniel-albano/pen/zYGKZEw?editors=1100
Your question is a little vague, but I'm assuming that you want to center the .previous and .next divs.
Since both of these are using display: flex already, you simply need to add align-items: center to the .previous and .next classes to make them center horizontally. If you also want the content (the image and text) to center vertically, you'll need to add justify-content: center. Here's the result:
.next {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.previous {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
If you're trying to make the images in those divs take up more space, you'll need to increase the width rule below. Since you commented that you need 100%, you'll need to change it to this:
.containerimg {
width: 100%;
height: auto;
}
I found the issue, I needed my images to contain 100% of the space and I needed to assign a width element to the child containers.
.container {
display: flex;
justify-content: center;
width:100vw;
}
.previous, .next{
width:30%;
display:flex;
flex-direction:column;
align-items:center;
}
img{
width:100%;
}
<div class="container">
<div class="previous">
<img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
<p>caption 1</p>
</div>
<div class="next">
<img class="containerimg" src="https://i.imgur.com/s11MTLc.png">
<p>caption 2</p>
</div>
</div>
You should be able to solve this issue by adding "align-items: center" to your .next and .previous classes. The reason for this is that when you switch the flex-direction to column that also switches how align-items and justify-content work, essentially reversing them.
.next {
display: flex;
flex-direction: column;
align-items: center;
}
.previous{
display: flex;
flex-direction: column;
align-items: center;
}
The R, P, and S end up being stacked on top of each other in a column rather than being side by side.
I've been going through freeCodeCamp and theOdinProject and this issue has come up a few times for me, I usually ended up just assigning each div an ID and using CSS to target it with a 'display: flex.'
I figured I should finally find out why this isn't working so if someone could please explain it to me, I'd greatly appreciate it!
Here's my HTML:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.keys {
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
justify-content: center;
flex-direction: row;
}
<html>
<head>
<link rel='stylesheet.css' type=text/css href='stylesheet.css'>
</head>
<body>
<div class='keys'>
<div data-key='82' class='key'>
<kbd>R</kbd>
</div>
<div data-key='80' class='key'>
<kbd>P</kbd>
</div>
<div data-key='83' class='key'>
<kbd>S</kbd>
</div>
</div>
</body>
</html>
You don't need the "flex: 1".
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
^ should do it.
If you want to space the items, try justify-content: space-evenly
I'm trying to move a picture from the left to the right, and my H3 element from the right to the left.
I recently just finished learning about flexbox via teamtreehouse.com, but doing it on my own I seem to have become stuck!
Anything I seem to write to do with flex just doesn't seem to work, so I'm presuming I've done something majorly wrong!
#about {
margin-top: 50px;
margin-left: 30px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
<div id="about">
<section>
<img src="img/meprofile.jpg" alt="Photograph of" class="profile-photo">
<h2 class="aboutme">About</h2>
<p>Hi,.</p>
<p>If you'd like to follow me on Twitter, my username is #leehoward05.</p>
</section>
</div>
Your intended flex parent is too high up in the DOM tree. The flex parent must be one level above the children. Try this:
#about > section {
margin-top: 50px;
margin-left: 30px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.aboutme {
order: 0;
}
.profile-photo {
order: 3;
}
https://jsfiddle.net/8kcf5snm/