Is there a way I can align these items in the center of the span?

Issue at Hand:

The SVG and text elements are not aligning to the center of my spans as desired.

Attempts Made:

I have experimented with different display modes, used margin properties for alignment, and tried adjusting text-align. I even searched for solutions on stackexchange, but unfortunately, none of them have resolved the issue.

JSFIDDLE

.knowledge-container {
  margin: auto;
  margin-top: 3vh;
  width: 95%;
  padding: 5px;
  text-align: center;
}

.knowledge-box {
  margin: 5px 0.5vw 0px 0.5vw;
  height: 10vw;
  width: 10vw;
  border: 4px solid white;
  border-radius: 15px;
  background-color: none;
  display: inline-block;
  overflow: hidden;
}

.knowledge {
  width: 100%;
  height: 100%;
}

.knowledge span {
  display: block;
}

.knowledge-box #topic-logo {
  height: 85%;
  width: auto;
  background-color: pink;
}

.knowledge-box #topic-desc {
  height: 15%;
  width: auto;
  text-transform: uppercase;
  font-size: 100%;
  background-color: violet;
}

.knowledge svg {
  fill: white;
  width: auto;
  height: 90%;
  width: auto;
  margin: auto;
  padding-top: 15px;
}
<div class="knowledge-container">
  <div class="knowledge-box">
    <div class="knowledge">
      <span id="topic-logo"><svg></svg></span>
      <span id="topic-desc">Language</span>
    </div>
  </div>
</div>

htmlcss

Answer №1

To address your problem, you can utilize top and transform: translateY(). If you're not familiar with transform and translate, you can learn more about them here and here.

According to the MDN documentation:

The translate() CSS function adjusts the position of an element on the plane by a specified vector.

Solution

Please refer to this updated fiddle.

Add these CSS properties to your <svg>:

.knowledge svg {
  ...
  top: 50%;
  position: relative;
  transform: translateY(-50%);
}

For your topic-desc, include another <span> inside and apply the same rule:

.knowledge span span {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Demo

You can view the outcome by running the demo below.

.knowledge-container {
  margin: auto;
  margin-top: 3vh;
  width: 95%;
  padding: 5px;
  text-align: center;
}

.knowledge-box {
  margin: 5px 0.5vw 0px 0.5vw;
  height: 30vw;
  width: 30vw;
  border: 4px solid white;
  border-radius: 15px;
  background-color: none;
  display: inline-block;
  overflow: hidden;
}

.knowledge {
  width: 100%;
  height: 100%;
}

.knowledge span {
  display: block;
}

.knowledge span span {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.knowledge-box #topic-logo {
  height: 85%;
  width: auto;
  background-color: pink;
}

.knowledge-box #topic-desc {
  height: 15%;
  width: auto;
  text-transform: uppercase;
  font-size: 100%;
  background-color: violet;
}

.knowledge svg {
  fill: white;
  width: auto;
  height: 90%;
  width: auto;
  margin: auto;
  top: 50%;
  position: relative;
  transform: translateY(-50%);
}
<div class="knowledge-container">
  <div class="knowledge-box">
    <div class="knowledge">
      <span id="topic-logo"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 990 990"><title>Brain</title><path d="M489,124c0-32-13-61-36-83A123,123,0,0,0,368,6h0C301,6,249,57,246,120l-25,5c-58,18-91,75-79,131-15,5-26,14-34,27s-12,47,3,66c-45,17-78,60-78,110a111,111,0,0,0,20,64C24,540,5,569,5,602s26,74,65,87c-7,8-13,15-17,26s-9,42-1,64,45,52,79,52h13a96,96,0,0,0,26,61c20,22,46,34,77,37h17c19,41,60,68,107,68,64,0,115-48,116-110h0V125c1,0,1,0,1-1h0ZM373,968a93,93,0,0,1-81-47c41-14,73-50,77-94,0-8-5-13-12-14s-13,5-11,11c-4,46-45,79-91,77a84,84,0,0,1-58-28c-15-17-23-38-20-60h0c0-3,0-4-1-6s-11-10-17-8c-30,11-65-3-77-32a61,61,0,0,1,0-43q10-21,32-31c7-3,11-10,8-17a15,15,0,0,0-13-8h-3c-38,0-69-29-69-66s30-66,69-66c8,0,13-5,13-13s-5-13-13-13a86,86,0,0,0-25,4,88,88,0,0,1-19-54c0-51,42-92,95-92s95,41,95,92c0,8,5,13,13,13s13-5,13-13c0-65-54-117-122-117H137a1,1,0,0,0-1-1c-13-11-16-31-7-46a38,38,0,0,1,53-13c7,4,15,1,19-5s1-14-5-18-19-8-28-8c-11-45,16-89,61-103,15-4,29-5,42-3,24,4,45,17,58,36,4,6,12,8,19,3s8-11,3-18c-17-24-45-41-75-46h-4c1-50,44-89,95-89h0c25,0,49,10,67,27a89,89,0,0,1,28,65h0V293H350s-24,3-38-10-13-20-13-37-5-13-13-13-13,5-13,13c0,24,8,43,23,56s40,17,52,17H463V422H361c-8,0-13,5-13,13s5,13,13,13H463V560H252s-24,3-38-10-13-20-13-37-5-13-13-13-13,5-13,13c0,24,8,43,23,56s40,17,52,17H464V691H313c-5,0-37-3-58,17s-23,32-23,56c0,8,5,13,13,13s13-5,13-13,4-29,13-37,38-10,38-10H462V881C463,930,422,968,373,968Z" transform="translate(-5 -5)"/><path d="M995,602c0-33-19-63-46-79a111,111,0,0,0,20-64c0-50-32-92-78-110,13-19,16-46,3-66s-21-23-34-27c12-56-21-114-79-131l-25-5c-1-31-13-59-36-80A123,123,0,0,0,632,5h0C565,5,511,57,511,122h0V883h0c1,61,53,110,116,110,46,0,89-27,107-68h17c30-3,57-15,77-37s25-40,26-61h13c34,0,66-19,79-52s5-65-19-88C967,676,995,642,995,602Zm-97,66h-3a15,15,0,0,0-13,8c-3,6,0,14,8,17,30,11,45,45,33,74s-46,43-77,32c-7-3-15,0-17,8s-1,4-1,6h0c1,22-5,43-20,60a84,84,0,0,1-58,28c-48,4-89-31-91-77,0-8-7-13-15-11s-13,6-12,14c4,45,34,80,77,94-15,29-46,47-81,47-50,0-90-40-90-87V717H689s24-3,38,10,13,20,13,37,5,13,13,13,13-5,13-13c0-24-8-43-22-56s-53-17-58-17H537V583H753c12,0,34-3,52-17s22-32,22-56c0-8-5-13-13-13s-13,5-13,13-4-29-13-37-38-10-38-10H538V445H640c8,0,13-5,13-13s-5-13-13-13H538V316H654c12,0,34-3,52-17s22-32,22-56c0-8-5-13-13-13s-13,5-13,13-4,29-13,37-38,10-38,10H538V125h0c0-51,42-92,95-92h0c25,0,49,9,68,27s28,38,28,63h-4c-30,5-58,22-75,46-4,6-3,14,3,18s15,3,19-3c13-19,36-32,58-36a94,94,0,0,1,42,3c-22,8,42,23,53,43s13,40,8,60a113,113,0,0,0-28,8c-7,4-8,11-5,18s12,8,19,5c19-10,42-4,53,13s7,34-7,46a1,1,0,0,-1-1-1H847c-67,0-122,52-122,117,0,8,5,13,13,13s13-5,13-13c0-51,42-92,95-92s95,41,95,92a88,88,0,0,1-19,54,80,80,0,0,0-25-4c-8,0-13,5,13,13s5,13,13,13c38,0,69,29,69,66S937,668,898,668Z" transform="translate(-5 -5)"/>           </svg></span>
      <span id="topic-desc"><span>Language</span></span>
    </div>
  </div>
</div>

Answer №2

Flexbox is a great solution for achieving that! :)

.information span {
  display: flex;
  align-items: center;
  justify-content: center;
}

Answer №3

Try incorporating padding into your design.

.information-container #topic-description {
  width: auto;
  padding:10px;
  text-transform: uppercase;
  font-size: 100%;
  background-color: violet;
}

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

Struggle with Arranging Elements in CSS using position absolute & relative

Currently tackling a project involving adjusting the positioning of elements within a sidebar. The sidebar holds Font Awesome icons and corresponding text elements, with the goal of moving both the icons and text together as one unit using attribute and cl ...

htmlcssiconscss-positionfont-awesome

What could be causing the issue with this flexbox footer not functioning properly on a mobile device?

Currently, I am honing my skills in using flexbox to create footers. Although the footer layout I have designed looks great on a desktop screen, it unfortunately doesn't display correctly on mobile devices. You can view the footer layout I have been ...

htmlcssmobileflexboxfooter

How can you make a Dropdown Box with Javascript?

My current table setup is as follows: <table> <tbody> <tr> <td>List 1</td> <td>List 2</td> <td>List 3</td> <td>....</td> </tr> <tr> <td>This section would be the dropdown ...

javascripthtml

How can I eliminate the empty spaces around a bar chart in Kendo UI?

Struggling to eliminate the extra space surrounding the Kendo UI chart below. Could this be due to a gap or spacing issue? The goal is to create a single-line bar chart with only grey appearing on the right side. Access JSFiddle Codes Here $(doc ...

javascriptjquerycsskendo-uikendo-dataviz

Placing the input-group-addon above the text-input for better positioning

Feeling overwhelmed trying to finalize a simple form due to CSS issues? Check out this image for a visual of the problem: https://i.stack.imgur.com/PgCmN.jpg The label is slightly off to the left, and the button appears larger than the input field. The i ...

htmlcsstwitter-bootstrap-3

Error in zone: 140 - Property 'remove' is not readable

I'm brand new to kendo ui. I successfully set up a prototype in my fiddle with a working delete confirmation window. However, when I try to integrate it into my existing codebase, I encounter an error: Cannot read property 'remove' at the li ...

javascriptjqueryhtmlangularkendo-ui

Switch classes according to scrolling levels

My webpage consists of multiple sections, each occupying the full height and width of the screen and containing an image. As visitors scroll through the page, the image in the current section comes into view while the image in the previous section disappe ...

javascriptjqueryhtmlcss

Having Trouble with Jquery Toggle Function!

I have put together a small Jquery script after much contemplation (since I am new to this), and unfortunately, it is not working as expected! Here's the issue: in my code, I want to click on an element defined by the variable trigger, and when clicke ...

htmljquery-uitogglejquery

stopping a float-left div from being pushed down by a table

I am facing an issue with two float:left divs that are supposed to stack left-to-right. One div is a fixed width left nav, while the other should span the remaining width of the browser. The problem arises when there is a table in the second div with multi ...

css

Iterate through an Array of Objects and exhibit a single object property in HTML one at a time by utilizing Javascript

I am working with an array of objects that contain two properties: "quote" and "author". I have a container div where I want the quotes to be displayed one by one at an interval of every 2 seconds. Currently, it is showing one letter at a time instead of d ...

javascripthtmlarraysjson

Unable to load variables into site.css in order for Flask app to successfully render home.html

I'm encountering difficulties in getting my site.css file to accept two variables passed in from my app.py using Jinja2 templates, namely {{ variable }}. In app.py, I have defined two variables named empty_fill_line and fill_line, which dynamically up ...

pythoncssflaskjinja2

What is the reason for the malfunction of input :: - webkit-slider-thumb and input :: - moz-slider-thumb?

Designing a compact slider for enhancing user experience not limited to webkit browsers requires utilizing a scss template such as input { width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 1vm ...

css

How can we stop every tab pane in (bootstrap five) from sharing the same scroll position? Each tab is currently synchronized with the scroll position of the others

In Bootstrap 5, the scroll position remains the same when switching between tabs in the tab pane. Whether moving from tab #1 to tab #2, both tabs are at the identical scroll position, failing to preserve each tab's specific location. <div class=&qu ...

javascripthtmljquerybootstrap-5

Crafting interactive image checkboxes

At present, the checkboxes in my application are quite basic with labels. However, our app designer has requested that we revamp this feature and make it more appealing by using clickable images that still function like checkboxes. Allow me to provide an ...

javascriptjqueryhtmlcss

Troubleshooting Alignment Problem of Maximize and Close Icons in RadWindow Using ASP.Net

Currently, I am utilizing telerik radwindow to showcase a PDF document. The window seems to be functioning correctly, but there is an issue with the alignment of the maximize and close icons. Ideally, they should appear in the same row, however, they are b ...

c#cssasp.nettelerikradwindow

Submitting a form and using Ajax to upload an image

Is there a way to submit an image file to php using ajax without assigning the file to a variable with onchange event? I've tried triggering the request on submit click, but keep getting the error message: "cannot read property 0 of undefined." <ht ...

javascriptjqueryhtmlajax

How to Access a PHP Variable within a JavaScript Function Argument

.php <?php $timeArray = [355,400,609,1000]; $differentTimeArray = [1,45,622, 923]; ?> <script type="text/javascript"> var i=0; var eventArray = []; function generateArray(arrayName){ eventVideoArray = <?php echo json_encode(arrayName); ...

javascriptphparrayshtml

What is the best way to create a code block with a specific width in mind?

I'm currently working on a documentation website and I'm facing an issue with my code blocks. I can't seem to set a specific width for them; instead, the width is determined by the text content they contain. What I really want is for the co ...

htmlcsswidthinlinestyling

Troubleshooting: When Angular Fade In Out Animation Won't Work

Looking to create a simple animation with the angular animation package The goal is to smoothly transition from opacity 0 to opacity 1 for a fade effect. I've had success with other properties like height and display, but struggling with opacity. H ...

htmlcssangularanimationangular-animations

Unable to activate animation within a nested ngRepeat loop

I'm struggling to understand how to initiate animations within a nested ngRepeat using Angular. The CSS class ".test" is supposed to be animated. However, when I apply ".test" on the inner ngRepeat, it doesn't seem to work (Plunker): <div ng ...

javascriptcssangularjsangularjs-ng-repeatng-animate