CODEWITHSUNDEEP
imagetextalignmentcenterbetween
HappyHands31
HappyHands31

Reputation: 4101

How to Align Text Between Two Images?

I have two images, a left arrow and a right arrow, that need to go outside of the text "submit your picture here!" I am actually able to achieve the look I'm going for: https://i.sstatic.net/GQSbN.jpg ,but I used z-index to do so, which does not stay relative to the text when the screen is made smaller/larger. What would you suggest is the best way to go about this? Here is my code for the text:

<article>

<br>

<p style="text-align:center;font-family:arial">
<font size="4">
<strong>
<span class="white_bg">
Submit your picture here!
</span>
</strong>
</font>
</p>


<br>
<br>
<br>
<br>
<br>
<br>
</article>

There's not really anything (yet in the css) that pertains to this. Thanks!

Edit: Full CSS and HTML

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
<!--

#banner {width:100%}
#banner img {width:100%;height:auto}

nav {width:100%;display:block;}
nav ul {list-style-type:none;margin:0;padding:0;text-  
align:center;background-color:#222419}
nav li {display:inline-block;background-color:#222419;}
nav a {line-height:35px; color:white; padding: 0 30px; font-size:18px;
   font-family:Arial, sans-serif;background-color:#222419;}
nav a:hover {text-decoration:none}

a{float:left;
  margin-right:58px;
  margin-left:58px;
  color:#000;
  text-decoration:none;
 }
 body  {background-image:url("background1.jpg");
   background-size:1700px 850px;
   background-repeat:no-repeat;
}
.white_bg  {background-color:#ffffff;
        padding: 1px;
}

.col-split-3  {
 -webkit-column-count:3;
 -moz-column-count:3;
 column-count:3;
 text-align:center;
 width: 450px;
}

.col-split-3 > div {
display:block;
}

-->
</style> 
<meta charset="utf-8"/>
<title>DrawYourPets.com</title>
</head>

<body>

<header>
<nav> 
<div style="text-align:center" id="banner">
<img src="drawyourpetsbanner3.jpg" border="0" alt="DrawYourPetsBanner3"/>
</div>

<div>
<ul>
<li><a href="index.html"><strong>HOME</strong></a></li>
<li><a href="contact.html"><strong>CONTACT</strong></a></li>
<li><a href="gallery.html"><strong>GALLERY<strong></a></li>
<li><a href="store.html"><strong>STORE</strong></a></li>
</ul>
</div>

</nav>
</header>

<section>
<aside>
</aside>

<article>

<br>

<div class="col-split-3">
<div><img src="arrow1.jpg" width="120" height="120"/></div>
<div><p style="font-family:arial">
<font size="4">
<strong>
<span class="white_bg">
Submit your picture here!
</span>
</strong>
</font>
</div>
<div><img src="arrow2.jpg" width="120" height="120"/></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
</article>

</section>

<footer>
<div style="text-align:center" id="banner">
<img src="banner3.jpg" border="0" alt="Banner3">
</div>
</footer>

</body>
</html>

Edit 2 - Columns Centered

I found that the columns are similar to a table, and can only be centered in the css by adding margin-left and margin-right:auto: 

.col-split-3  {
 margin-left:auto;
 margin-right:auto;
 -webkit-column-count:3;
 -moz-column-count:3;
 column-count:3;
 text-align:center;
 width: 500px;

}

.col-split-3 > div {
display:block;

}

Now my only problem is getting "submit your picture here!" on two lines. I need to find a way to expand the width of the center column. Current screenshot:https://i.sstatic.net/Kv3KB.jpg

Upvotes: 0

Views: 2019

Answers (1)

Jhecht
Jhecht

Reputation: 4435

There are a couple of ways to do this, just from me fiddling around with - Keep In mind: I've only tested these on Chrome because I don't have any other browsers installed on my computer.

Example 1

.img-left {
  float: left;
}
.img-right {
  float: right
}
.center {
  text-align: center;
  border: 1px solid black;
}
<br />
<div class="center">
  <div class="img-left">
    This is the left image
  </div>
  Text
  <div class="img-right">
    This is the right image
  </div>
</div>

Example 2 (edited)

This one uses a trick of block-level elements inside an element with the column-count CSS property auto splitting into columns. I've not tested this with any large amount of text, but by your example it looks to be a fairly simple application. I've added a width to the parent element to change the spacing between the elements.

.col-split-3 {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  text-align: center;
  width: 300px;
}
.col-split-3 > div {
  display: block;
}
<div class="col-split-3">
  <div>Image 1</div>
  <div>center text</div>
  <div>Image 2</div>
</div>

These were sort of the first two ways that came to mind, I'm sure there's some way to use the ::before and ::after selectors to add images, I just don't currently have the time to fiddle with how.

Upvotes: 1

Related Questions