Utilize the display flex property within a nested flex container

I can't seem to get my link text centered both vertically and horizontally, it keeps aligning to the left. I was under the impression that using flex-based alignments would solve this issue. I have gone through the information on using a flex item as a flex container and it should work, but for some reason, it's not working for me.

.trow {
  width: 50%;
  display: flex;
  min-width: 350px;
}

img {
  height: 150px;
  float: left;
}

a {
  height: 58%;
  background-color: #3d7db7;
  width: 100%;
}

#box1 {
  flex: initial;
}

#box2 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center; /* thanks to answers but vertically not working?*/
}
  
  <div class="trow">
    <div id="box1"><img src="images/Image.png"></div>
    <div id="box2">
      <a href="#">Link here</a>
    </div>
  </div>

cssflexbox

Answer №1

To ensure that your anchor is positioned at the center of its container, you must first make the container flex and add vertical alignment to it.

Additionally, in order to have the text centered within the anchor element, you need to apply flex properties and justify content for horizontal alignment:

.trow {
  width: 50%;
  display: flex;
  min-width: 350px;
}

#box2 {
  flex-grow: 1;         /* allow link holder to expand remaining width (and height) */
  display: flex;        /* enable vertical centering of content */
  align-items: center;  /* ensuring vertical alignment */
}

a {
  display: flex;             /* enables vertical and horizontal centering of anchor text */
  justify-content: center;   /* horizontally centered */
  align-items: center;       /* vertically centered */
  height: 58%;
  background-color: #3d7db7;
  width: 100%;
}
<div class="trow">
  <div id="box1"><img src="http://placehold.it/100x100"></div>
  <div id="box2">
    <a href="#">Link here</a>
  </div>
</div>

Answer №2

To center the text, you can use: text-align: center

If you want to align vertically, include flex in the a element as well

.trow {
  width: 50%;
  display: flex;
  min-width: 350px;
  height: 100px;
}

img {
  height: 100px;
  width: 100px;
  float: left;
}

a {
  height: 58%;
  background-color: #3d7db7;
  width: 100%;
}

#box1 {
  flex: initial;
}

#box2 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#box2 a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <div class="trow">
    <div id="box1"><img src="images/Image.png"></div>
    <div id="box2">
      <a href="#">Link here</a>
    </div>
  </div>
</body>
</html>

Answer №3

Applied text-align: center; to the #box2 element.

.trow {
  width: 50%;
  display: flex;
  min-width: 350px;
  align-items: center;
}

img {
  height: 100px;
  width: 100px;
  float: left;
}

a {
  height: 58%;
  background-color: #3d7db7;
  width: 100%;
}

#box1 {
  flex: initial;
}

#box2 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
<div class="trow">
  <div id="box1"><img src="images/Image.png"></div>
  <div id="box2">
    <a href="#">Link here</a>
  </div>
</div>

Answer №4

Witness the alterations I have made across the board, take note of the variances

.trow {
  width: 50%;
  display: flex;
  min-width: 350px;
}

img {
  height: 150px;
  float: left;
}

a {
  background-color: #3d7db7;
}

#box2 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: beige;
}
<div class="trow">
  <div id="box1"><img src="images/Image.png"></div>
  <div id="box2">
    <a href="#">Link here</a>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Searching for the index of a clicked element? Here's how to do

I am trying to determine the index of a clicked anchor element in my navigation using jQuery. However, when I use the following code snippet, I always get zero in the console: $('.navigation ul li a').click(function(e) { e.preventDefault(); ...

javascriptjqueryhtmlcss

Personalized Horizontal Radio Button Design

I have been struggling to achieve the desired design for radio buttons but without success. https://i.sstatic.net/TU7Ks.png Despite using bootstrap for my website, I am only able to achieve this: https://i.sstatic.net/WbzqS.png This is the code I am cu ...

htmlcsstwitter-bootstrap

The browser has disregarded a CSS rule

Hey there, I have a question that may seem silly, but I just can't seem to find the answer anywhere. Please take a look at this fiddle: I need to remove #Navigation in the CSS declaration below: #Navigation .stretch { ... } so it should look like ...

cssbrowser

Positioning Data Labels Outside of Pie or Doughnut Charts in Chart.js

I am currently working on a large-scale project and I am in need of a way to position the labels outside of pie charts or doughnut charts. I came across a plugin called outerLabels on GitHub which seems to be the perfect solution for what I need, but I am ...

cssangularchart.jspie-chart

Alter the Color of the 'div' According to the Background

At the bottom right of my website, there is a black chatbot icon. The web footer also has a black background. To create a clear contrast, I have decided to change the color of the chatbot to white as users scroll to the bottom of the page. I implemented t ...

javascriptcssangularsassfrontend

:after pseudo class not functioning properly when included in stylesheet and imported into React

I am currently utilizing style-loader and css-loader for importing stylesheets in a react project: require('../css/gallery/style.css'); Everything in the stylesheet is working smoothly, except for one specific rule: .grid::after { content: ...

javascriptcssreactjswebpack

Part II: Material-UI - Finding the Right Source for CSS Classes

I have recently started diving into Material UI - Grid and this question is a continuation of my previous query about defining CSS classes for Material UI components, specifically the classes.root Sunny day with a chance of rain I made some changes b ...

cssreactjsgridmaterial-ui

Creating a grid cell that spans the entire grid width

Snippet of CSS Code: .wrapper { display: grid; position: relative; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 25vh; width: 100%; } .prova { border: 1px solid; } .wrapper div:nth-child(2) { grid-column: 3; grid-row: 2 / 4; ...

htmlcssgrid

Populate div with straight lines running vertically or horizontally

I'm wondering how to create vertical or horizontal lines inside a div. I tried this in the past but lost the code, and searching for "fill div with lines" isn't giving me any relevant results. Here's an image to illustrate what I'm try ...

htmlcss

Div with hidden scrollbars for smooth scrolling experience

Is there a way to create scrollable DIV's without visible scrollbars? While Mac OS 10.7-8 display no visible scrolls, other operating systems like Windows, Mac OS, and Linux show the scrollbars. How can I achieve scrollable divs without the scrollbars ...

htmlcss

Enhance your product listings in Opencart 2.0 by adding supplementary images alongside the main product image

Can someone assist me with moving additional product images next to the main product image in the default opencart 2.0.1.1 theme? Currently, they are appearing below the product image and I would like them to be displayed alongside it instead. ...

css

Expanding a list in AngularJS: Implementing a scrollbar for a seamless user experience

I need assistance in creating a layout using AngularJS and angular-material that includes a vertical scrollbar when necessary: <div layout="column"> <div> <!-- Occupies 80% of window browser --> <md-list> <md-l ...

htmlcssangularjsscrollbarangular-material

I'm curious as to why these two divs are positioned side by side. Can anyone shed some light on why this footer isn't functioning properly

My goal is to showcase the logo along with 3 buttons containing all the social media links underneath it. However, for some reason, my 2 divs are displaying inline instead of flex or block. Can anyone shed light on why this isn't functioning as expect ...

htmlcssdeploymentfooter

The background image is failing to display, although other styles for the class or element are visible

Why won't the background image display, even though I have verified that the image path is correct and changing other properties like color or background color works just fine? Here is my CSS code snippet: .container { background-imag ...

htmlcssbackground-image

Accordion Box glitch detected in Firefox browser

I have been working on a JavaScript function that controls a slide up/down box. However, I've encountered some issues with Firefox as the box only opens and closes once before failing to work properly again. Upon further investigation, it seems that F ...

javascriptjqueryhtmlcss

"Utilize HTML to make inline-block elements appear small in size while giving the illusion of being

I have a group of inline-block elements (4 total), all arranged neatly in a single row. As the window size changes, the elements wrap to the next line accordingly. The page does not display scrollbars at the bottom until the browser width reaches the minim ...

htmlcsslayout

Make sure the inputs in separate table data cells are lined up in

I need help aligning two input fields in separate td elements to be on the same line. The issue I am encountering is that when an input is added to a td, it covers up any text within the td. https://i.stack.imgur.com/c7GiQ.png There are two scenarios: I ...

javascripthtmljquerycss

Adjust the left and right margins while maintaining the vertical margin spacing

Is there a way to apply horizontal margin while inheriting vertical margin without explicitly setting margin-left and margin-right? I was hoping for something like margin: inherit 20px; to be effective. Take a look at the example here: https://jsfiddle.ne ...

csshtmllayoutsass

Is there a way I can add opacity to a div without impacting the other elements contained in it?

When I set the opacity of a div, it seems to affect all the other elements inside that div by making them transparent too. However, I am looking for a solution where the child elements do not inherit the opacity of their parent. Any assistance on this is ...

css

Creating a Select component in React without relying on the Material-UI library involves customizing a dropdown

Is there a way to achieve a material UI style Select component without using the material UI library in my project? I'm interested in moving the label to the top left corner when the Select is focused. export default function App({...props}) { retu ...

javascripthtmlcssmaterial-ui